<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/input.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:38 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=forms.html>← 4.10 Forms</a> — <a href=index.html>Table of Contents</a> — <a href=form-elements.html>4.10.6 The button element →</a></nav><ol class=toc><li id=toc-semantics><ol><li><ol><li><a href=input.html#the-input-element><span class=secno>4.10.5</span> The <code>input</code> element</a><ol><li><a href=input.html#states-of-the-type-attribute><span class=secno>4.10.5.1</span> States of the <code>type</code> attribute</a><ol><li><a href="input.html#hidden-state-(type=hidden)"><span class=secno>4.10.5.1.1</span> Hidden state (<code>type=hidden</code>)</a><li><a href="input.html#text-(type=text)-state-and-search-state-(type=search)"><span class=secno>4.10.5.1.2</span> Text (<code>type=text</code>) state and Search state (<code>type=search</code>)</a><li><a href="input.html#telephone-state-(type=tel)"><span class=secno>4.10.5.1.3</span> Telephone state (<code>type=tel</code>)</a><li><a href="input.html#url-state-(type=url)"><span class=secno>4.10.5.1.4</span> URL state (<code>type=url</code>)</a><li><a href="input.html#email-state-(type=email)"><span class=secno>4.10.5.1.5</span> Email state (<code>type=email</code>)</a><li><a href="input.html#password-state-(type=password)"><span class=secno>4.10.5.1.6</span> Password state (<code>type=password</code>)</a><li><a href="input.html#date-state-(type=date)"><span class=secno>4.10.5.1.7</span> Date state (<code>type=date</code>)</a><li><a href="input.html#month-state-(type=month)"><span class=secno>4.10.5.1.8</span> Month state (<code>type=month</code>)</a><li><a href="input.html#week-state-(type=week)"><span class=secno>4.10.5.1.9</span> Week state (<code>type=week</code>)</a><li><a href="input.html#time-state-(type=time)"><span class=secno>4.10.5.1.10</span> Time state (<code>type=time</code>)</a><li><a href="input.html#local-date-and-time-state-(type=datetime-local)"><span class=secno>4.10.5.1.11</span> Local Date and Time state (<code>type=datetime-local</code>)</a><li><a href="input.html#number-state-(type=number)"><span class=secno>4.10.5.1.12</span> Number state (<code>type=number</code>)</a><li><a href="input.html#range-state-(type=range)"><span class=secno>4.10.5.1.13</span> Range state (<code>type=range</code>)</a><li><a href="input.html#color-state-(type=color)"><span class=secno>4.10.5.1.14</span> Color state (<code>type=color</code>)</a><li><a href="input.html#checkbox-state-(type=checkbox)"><span class=secno>4.10.5.1.15</span> Checkbox state (<code>type=checkbox</code>)</a><li><a href="input.html#radio-button-state-(type=radio)"><span class=secno>4.10.5.1.16</span> Radio Button state (<code>type=radio</code>)</a><li><a href="input.html#file-upload-state-(type=file)"><span class=secno>4.10.5.1.17</span> File Upload state (<code>type=file</code>)</a><li><a href="input.html#submit-button-state-(type=submit)"><span class=secno>4.10.5.1.18</span> Submit Button state (<code>type=submit</code>)</a><li><a href="input.html#image-button-state-(type=image)"><span class=secno>4.10.5.1.19</span> Image Button state (<code>type=image</code>)</a><li><a href="input.html#reset-button-state-(type=reset)"><span class=secno>4.10.5.1.20</span> Reset Button state (<code>type=reset</code>)</a><li><a href="input.html#button-state-(type=button)"><span class=secno>4.10.5.1.21</span> Button state (<code>type=button</code>)</a></ol><li><a href=input.html#input-impl-notes><span class=secno>4.10.5.2</span> Implementation notes regarding localization of form controls</a><li><a href=input.html#common-input-element-attributes><span class=secno>4.10.5.3</span> Common <code>input</code> element attributes</a><ol><li><a href=input.html#the-maxlength-and-minlength-attributes><span class=secno>4.10.5.3.1</span> The <code>maxlength</code> and <code>minlength</code> attributes</a><li><a href=input.html#the-size-attribute><span class=secno>4.10.5.3.2</span> The <code>size</code> attribute</a><li><a href=input.html#the-readonly-attribute><span class=secno>4.10.5.3.3</span> The <code>readonly</code> attribute</a><li><a href=input.html#the-required-attribute><span class=secno>4.10.5.3.4</span> The <code>required</code> attribute</a><li><a href=input.html#the-multiple-attribute><span class=secno>4.10.5.3.5</span> The <code>multiple</code> attribute</a><li><a href=input.html#the-pattern-attribute><span class=secno>4.10.5.3.6</span> The <code>pattern</code> attribute</a><li><a href=input.html#the-min-and-max-attributes><span class=secno>4.10.5.3.7</span> The <code>min</code> and <code>max</code> attributes</a><li><a href=input.html#the-step-attribute><span class=secno>4.10.5.3.8</span> The <code>step</code> attribute</a><li><a href=input.html#the-list-attribute><span class=secno>4.10.5.3.9</span> The <code>list</code> attribute</a><li><a href=input.html#the-placeholder-attribute><span class=secno>4.10.5.3.10</span> The <code>placeholder</code> attribute</a></ol><li><a href=input.html#common-input-element-apis><span class=secno>4.10.5.4</span> Common <code>input</code> element APIs</a><li><a href=input.html#common-input-element-events><span class=secno>4.10.5.5</span> Common event behaviors</a></ol></ol></ol></ol><h4 id=the-input-element><span class=secno>4.10.5</span> The <dfn data-dfn-type=element><code>input</code></dfn> element<a href=#the-input-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>1+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input</a></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement title="The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of <input> elements.">HTMLInputElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>8+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/disabled title="The HTMLButtonElement.disabled property indicates whether the control is disabled, meaning that it does not accept any clicks.">HTMLButtonElement/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/disabled title="The HTMLSelectElement.disabled property is a boolean value that reflects the disabled HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks. A disabled element is unusable and un-clickable.">HTMLSelectElement/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/multiple title="The HTMLInputElement.multiple property indicates if an input can have more than one value. Firefox currently only supports multiple for <input type=&quot;file&quot;>.">HTMLInputElement/multiple</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.6+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-input-element:concept-element-categories>Categories</a>:<dd><a id=the-input-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-input-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd>If the <code id=the-input-element:attr-input-type><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href="#hidden-state-(type=hidden)" id="the-input-element:hidden-state-(type=hidden)">Hidden</a> state: <a id=the-input-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd>If the <code id=the-input-element:attr-input-type-2><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href="#hidden-state-(type=hidden)" id="the-input-element:hidden-state-(type=hidden)-2">Hidden</a> state: <a href=forms.html#category-listed id=the-input-element:category-listed>Listed</a>, <a href=forms.html#category-label id=the-input-element:category-label>labelable</a>, <a href=forms.html#category-submit id=the-input-element:category-submit>submittable</a>, <a href=forms.html#category-reset id=the-input-element:category-reset>resettable</a>, and <a href=forms.html#category-autocapitalize id=the-input-element:category-autocapitalize>autocapitalize-and-autocorrect inheriting</a> <a id=the-input-element:form-associated-element href=forms.html#form-associated-element>form-associated element</a>.<dd>If the <code id=the-input-element:attr-input-type-3><a href=#attr-input-type>type</a></code> attribute is in the <a href="#hidden-state-(type=hidden)" id="the-input-element:hidden-state-(type=hidden)-3">Hidden</a> state: <a href=forms.html#category-listed id=the-input-element:category-listed-2>Listed</a>, <a href=forms.html#category-submit id=the-input-element:category-submit-2>submittable</a>, <a href=forms.html#category-reset id=the-input-element:category-reset-2>resettable</a>, and <a href=forms.html#category-autocapitalize id=the-input-element:category-autocapitalize-2>autocapitalize-and-autocorrect inheriting</a> <a id=the-input-element:form-associated-element-2 href=forms.html#form-associated-element>form-associated element</a>.<dd>If the <code id=the-input-element:attr-input-type-4><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href="#hidden-state-(type=hidden)" id="the-input-element:hidden-state-(type=hidden)-4">Hidden</a> state: <a id=the-input-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-input-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-input-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-input-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-input-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-input-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-input-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-input-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-input-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-input-element:attr-input-accept><a href=#attr-input-accept>accept</a></code> —  Hint for expected file type in <a href="#file-upload-state-(type=file)" id="the-input-element:file-upload-state-(type=file)">file upload controls</a>
     <dd><code id=the-input-element:attr-input-alpha><a href=#attr-input-alpha>alpha</a></code> —  Allow the color's alpha component to be set
     <dd><code id=the-input-element:attr-input-alt><a href=#attr-input-alt>alt</a></code> —  Replacement text for use when images are not available
     <dd><code id=the-input-element:attr-fe-autocomplete><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> —  Hint for form autofill feature
     <dd><code id=the-input-element:attr-input-checked><a href=#attr-input-checked>checked</a></code> —  Whether the control is checked
     <dd><code id=the-input-element:attr-input-colorspace><a href=#attr-input-colorspace>colorspace</a></code> —  The color space of the serialized color
     <dd><code id=the-input-element:attr-fe-dirname><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code> —  Name of form control to use for sending the element's <a href=dom.html#the-directionality id=the-input-element:the-directionality>directionality</a> in <a id=the-input-element:form-submission-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-input-element:attr-fe-disabled><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> —  Whether the form control is disabled
     <dd><code id=the-input-element:attr-fae-form><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> —  Associates the element with a <code id=the-input-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element
     <dd><code id=the-input-element:attr-fs-formaction><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code> —  <a id=the-input-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> to use for <a id=the-input-element:form-submission-2-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-input-element:attr-fs-formenctype><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code> —  <a id=the-input-element:entry-list href=form-control-infrastructure.html#entry-list>Entry list</a> encoding type to use for <a id=the-input-element:form-submission-2-3 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-input-element:attr-fs-formmethod><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code> —  Variant to use for <a id=the-input-element:form-submission-2-4 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-input-element:attr-fs-formnovalidate><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code> —  Bypass form control validation for <a id=the-input-element:form-submission-2-5 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-input-element:attr-fs-formtarget><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code> —  <a id=the-input-element:navigable href=document-sequences.html#navigable>Navigable</a> for <a id=the-input-element:form-submission-2-6 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-input-element:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> —  Vertical dimension
     <dd><code id=the-input-element:attr-input-list><a href=#attr-input-list>list</a></code> —  List of autocomplete options
     <dd><code id=the-input-element:attr-input-max><a href=#attr-input-max>max</a></code> —  Maximum value
     <dd><code id=the-input-element:attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> —  Maximum <a id=the-input-element:length href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of value
     <dd><code id=the-input-element:attr-input-min><a href=#attr-input-min>min</a></code> —  Minimum value
     <dd><code id=the-input-element:attr-input-minlength><a href=#attr-input-minlength>minlength</a></code> —  Minimum <a id=the-input-element:length-2 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of value
     <dd><code id=the-input-element:attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> —  Whether to allow multiple values
     <dd><code id=the-input-element:attr-fe-name><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> —  Name of the element to use for <a id=the-input-element:form-submission-2-7 href=form-control-infrastructure.html#form-submission-2>form submission</a> and in the <code id=the-input-element:dom-form-elements><a href=forms.html#dom-form-elements>form.elements</a></code> API 
     <dd><code id=the-input-element:attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> —  Pattern to be matched by the form control's value
     <dd><code id=the-input-element:attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code> —  User-visible label to be placed within the form control
     <dd><code id=the-input-element:attr-popovertarget><a href=popover.html#attr-popovertarget>popovertarget</a></code> —  Targets a popover element to toggle, show, or hide
     <dd><code id=the-input-element:attr-popovertargetaction><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code> —  Indicates whether a targeted popover element is to be toggled, shown, or hidden
     <dd><code id=the-input-element:attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> —  Whether to allow the value to be edited by the user
     <dd><code id=the-input-element:attr-input-required><a href=#attr-input-required>required</a></code> —  Whether the control is required for <a id=the-input-element:form-submission-2-8 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-input-element:attr-input-size><a href=#attr-input-size>size</a></code> —  Size of the control
     <dd><code id=the-input-element:attr-input-src><a href=#attr-input-src>src</a></code> —  Address of the resource
     <dd><code id=the-input-element:attr-input-step><a href=#attr-input-step>step</a></code> —  Granularity to be matched by the form control's value
     <dd><code id=the-input-element:attr-input-type-5><a href=#attr-input-type>type</a></code> —  Type of form control
     <dd><code id=the-input-element:attr-input-value><a href=#attr-input-value>value</a></code> —  Value of the form control
     <dd><code id=the-input-element:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> —  Horizontal dimension
     <dd>Also, the <code id=the-input-element:attr-input-title><a href=#attr-input-title>title</a></code> attribute <a href=#attr-input-title id=the-input-element:attr-input-title-2>has special semantics</a> on this element:  Description of pattern (when used with <code id=the-input-element:attr-input-pattern-2><a href=#attr-input-pattern>pattern</a></code> attribute)
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-input-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><code id=the-input-element:attr-input-type-6><a href=#attr-input-type>type</a></code> attribute in the <a href="#hidden-state-(type=hidden)" id="the-input-element:hidden-state-(type=hidden)-5">Hidden</a> state: <a href=https://w3c.github.io/html-aria/#el-input-hidden>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-hidden>for implementers</a>.<dd><code id=the-input-element:attr-input-type-7><a href=#attr-input-type>type</a></code> attribute in the <a href="#text-(type=text)-state-and-search-state-(type=search)" id="the-input-element:text-(type=text)-state-and-search-state-(type=search)">Text</a> state: <a href=https://w3c.github.io/html-aria/#el-input-text>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-text>for implementers</a>.<dd><code id=the-input-element:attr-input-type-8><a href=#attr-input-type>type</a></code> attribute in the <a href="#text-(type=text)-state-and-search-state-(type=search)" id="the-input-element:text-(type=text)-state-and-search-state-(type=search)-2">Search</a> state: <a href=https://w3c.github.io/html-aria/#el-input-search>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-search>for implementers</a>.<dd><code id=the-input-element:attr-input-type-9><a href=#attr-input-type>type</a></code> attribute in the <a href="#telephone-state-(type=tel)" id="the-input-element:telephone-state-(type=tel)">Telephone</a> state: <a href=https://w3c.github.io/html-aria/#el-input-tel>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-tel>for implementers</a>.<dd><code id=the-input-element:attr-input-type-10><a href=#attr-input-type>type</a></code> attribute in the <a href="#url-state-(type=url)" id="the-input-element:url-state-(type=url)">URL</a> state: <a href=https://w3c.github.io/html-aria/#el-input-url>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-url>for implementers</a>.<dd><code id=the-input-element:attr-input-type-11><a href=#attr-input-type>type</a></code> attribute in the <a href="#email-state-(type=email)" id="the-input-element:email-state-(type=email)">Email</a> state: <a href=https://w3c.github.io/html-aria/#el-input-email>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-email>for implementers</a>.<dd><code id=the-input-element:attr-input-type-12><a href=#attr-input-type>type</a></code> attribute in the <a href="#password-state-(type=password)" id="the-input-element:password-state-(type=password)">Password</a> state: <a href=https://w3c.github.io/html-aria/#el-input-password>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-password>for implementers</a>.<dd><code id=the-input-element:attr-input-type-13><a href=#attr-input-type>type</a></code> attribute in the <a href="#date-state-(type=date)" id="the-input-element:date-state-(type=date)">Date</a> state: <a href=https://w3c.github.io/html-aria/#el-input-date>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-date>for implementers</a>.<dd><code id=the-input-element:attr-input-type-14><a href=#attr-input-type>type</a></code> attribute in the <a href="#month-state-(type=month)" id="the-input-element:month-state-(type=month)">Month</a> state: <a href=https://w3c.github.io/html-aria/#el-input-month>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-month>for implementers</a>.<dd><code id=the-input-element:attr-input-type-15><a href=#attr-input-type>type</a></code> attribute in the <a href="#week-state-(type=week)" id="the-input-element:week-state-(type=week)">Week</a> state: <a href=https://w3c.github.io/html-aria/#el-input-week>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-week>for implementers</a>.<dd><code id=the-input-element:attr-input-type-16><a href=#attr-input-type>type</a></code> attribute in the <a href="#time-state-(type=time)" id="the-input-element:time-state-(type=time)">Time</a> state: <a href=https://w3c.github.io/html-aria/#el-input-time>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-time>for implementers</a>.<dd><code id=the-input-element:attr-input-type-17><a href=#attr-input-type>type</a></code> attribute in the <a href="#local-date-and-time-state-(type=datetime-local)" id="the-input-element:local-date-and-time-state-(type=datetime-local)">Local Date and Time</a> state: <a href=https://w3c.github.io/html-aria/#el-input-datetime-local>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-datetime-local>for implementers</a>.<dd><code id=the-input-element:attr-input-type-18><a href=#attr-input-type>type</a></code> attribute in the <a href="#number-state-(type=number)" id="the-input-element:number-state-(type=number)">Number</a> state: <a href=https://w3c.github.io/html-aria/#el-input-number>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-number>for implementers</a>.<dd><code id=the-input-element:attr-input-type-19><a href=#attr-input-type>type</a></code> attribute in the <a href="#range-state-(type=range)" id="the-input-element:range-state-(type=range)">Range</a> state: <a href=https://w3c.github.io/html-aria/#el-input-range>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-range>for implementers</a>.<dd><code id=the-input-element:attr-input-type-20><a href=#attr-input-type>type</a></code> attribute in the <a href="#color-state-(type=color)" id="the-input-element:color-state-(type=color)">Color</a> state: <a href=https://w3c.github.io/html-aria/#el-input-color>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-color>for implementers</a>.<dd><code id=the-input-element:attr-input-type-21><a href=#attr-input-type>type</a></code> attribute in the <a href="#checkbox-state-(type=checkbox)" id="the-input-element:checkbox-state-(type=checkbox)">Checkbox</a> state: <a href=https://w3c.github.io/html-aria/#el-input-checkbox>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-checkbox>for implementers</a>.<dd><code id=the-input-element:attr-input-type-22><a href=#attr-input-type>type</a></code> attribute in the <a href="#radio-button-state-(type=radio)" id="the-input-element:radio-button-state-(type=radio)">Radio Button</a> state: <a href=https://w3c.github.io/html-aria/#el-input-radio>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-radio>for implementers</a>.<dd><code id=the-input-element:attr-input-type-23><a href=#attr-input-type>type</a></code> attribute in the <a href="#file-upload-state-(type=file)" id="the-input-element:file-upload-state-(type=file)-2">File Upload</a> state: <a href=https://w3c.github.io/html-aria/#el-input-file>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-file>for implementers</a>.<dd><code id=the-input-element:attr-input-type-24><a href=#attr-input-type>type</a></code> attribute in the <a href="#submit-button-state-(type=submit)" id="the-input-element:submit-button-state-(type=submit)">Submit Button</a> state: <a href=https://w3c.github.io/html-aria/#el-input-submit>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-submit>for implementers</a>.<dd><code id=the-input-element:attr-input-type-25><a href=#attr-input-type>type</a></code> attribute in the <a href="#image-button-state-(type=image)" id="the-input-element:image-button-state-(type=image)">Image Button</a> state: <a href=https://w3c.github.io/html-aria/#el-input-image>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-image>for implementers</a>.<dd><code id=the-input-element:attr-input-type-26><a href=#attr-input-type>type</a></code> attribute in the <a href="#reset-button-state-(type=reset)" id="the-input-element:reset-button-state-(type=reset)">Reset Button</a> state: <a href=https://w3c.github.io/html-aria/#el-input-reset>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-reset>for implementers</a>.<dd><code id=the-input-element:attr-input-type-27><a href=#attr-input-type>type</a></code> attribute in the <a href="#button-state-(type=button)" id="the-input-element:button-state-(type=button)">Button</a> state: <a href=https://w3c.github.io/html-aria/#el-input-button>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-input-button>for implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-input-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlinputelement' data-dfn-type='interface'><c- g>HTMLInputElement</c-></dfn> : <a id='the-input-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-input-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-input-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-accept' data-dfn-type='attribute'><c- g>accept</c-></dfn>;
  [<a id='the-input-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-alpha' data-dfn-type='attribute'><c- g>alpha</c-></dfn>;
  [<a id='the-input-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-3'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-alt' data-dfn-type='attribute'><c- g>alt</c-></dfn>;
  [<a id='the-input-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-input-element:xattr-reflectsetter'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-fe-autocomplete' id='the-input-element:dom-fe-autocomplete'><c- g>autocomplete</c-></a>;
  [<a id='the-input-element:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-4'>Reflect</a>=&quot;<a href='#attr-input-checked' id='the-input-element:attr-input-checked-2'>checked</a>&quot;] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-defaultchecked' data-dfn-type='attribute'><c- g>defaultChecked</c-></dfn>;
  <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-input-checked' id='the-input-element:dom-input-checked'><c- g>checked</c-></a>;
  [<a id='the-input-element:cereactions-6' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-input-colorspace' id='the-input-element:dom-input-colorspace'><c- g>colorSpace</c-></a>;
  [<a id='the-input-element:cereactions-7' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-5'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-dirname' data-dfn-type='attribute'><c- g>dirName</c-></dfn>;
  [<a id='the-input-element:cereactions-8' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-6'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-fe-disabled' data-dfn-type='attribute'><c- g>disabled</c-></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-input-element:htmlformelement' href='forms.html#htmlformelement'><c- n>HTMLFormElement</c-></a>? <a href='form-control-infrastructure.html#dom-fae-form' id='the-input-element:dom-fae-form'><c- g>form</c-></a>;
  <c- b>attribute</c-> <a id='the-input-element:filelist' href='https://w3c.github.io/FileAPI/#filelist-section' data-x-internal='filelist'><c- n>FileList</c-></a>? <a href='#dom-input-files' id='the-input-element:dom-input-files'><c- g>files</c-></a>;
  [<a id='the-input-element:cereactions-9' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-input-element:xattr-reflectsetter-2'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <a href='form-control-infrastructure.html#dom-fs-formaction' id='the-input-element:dom-fs-formaction'><c- g>formAction</c-></a>;
  [<a id='the-input-element:cereactions-10' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-fs-formenctype' id='the-input-element:dom-fs-formenctype'><c- g>formEnctype</c-></a>;
  [<a id='the-input-element:cereactions-11' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-fs-formmethod' id='the-input-element:dom-fs-formmethod'><c- g>formMethod</c-></a>;
  [<a id='the-input-element:cereactions-12' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-7'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-fs-formnovalidate' data-dfn-type='attribute'><c- g>formNoValidate</c-></dfn>;
  [<a id='the-input-element:cereactions-13' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-8'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-fs-formtarget' data-dfn-type='attribute'><c- g>formTarget</c-></dfn>;
  [<a id='the-input-element:cereactions-14' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-input-element:xattr-reflectsetter-3'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-input-height' id='the-input-element:dom-input-height'><c- g>height</c-></a>;
  <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-input-indeterminate' id='the-input-element:dom-input-indeterminate'><c- g>indeterminate</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-input-element:htmldatalistelement' href='form-elements.html#htmldatalistelement'><c- n>HTMLDataListElement</c-></a>? <a href='#dom-input-list' id='the-input-element:dom-input-list'><c- g>list</c-></a>;
  [<a id='the-input-element:cereactions-15' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-9'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-max' data-dfn-type='attribute'><c- g>max</c-></dfn>;
  [<a id='the-input-element:cereactions-16' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectnonnegative' id='the-input-element:xattr-reflectnonnegative'><c- g>ReflectNonNegative</c-></a>] <c- b>attribute</c-> <c- b>long</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-maxlength' data-dfn-type='attribute'><c- g>maxLength</c-></dfn>;
  [<a id='the-input-element:cereactions-17' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-10'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-min' data-dfn-type='attribute'><c- g>min</c-></dfn>;
  [<a id='the-input-element:cereactions-18' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectnonnegative' id='the-input-element:xattr-reflectnonnegative-2'><c- g>ReflectNonNegative</c-></a>] <c- b>attribute</c-> <c- b>long</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-minlength' data-dfn-type='attribute'><c- g>minLength</c-></dfn>;
  [<a id='the-input-element:cereactions-19' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-11'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-multiple' data-dfn-type='attribute'><c- g>multiple</c-></dfn>;
  [<a id='the-input-element:cereactions-20' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-12'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-fe-name' data-dfn-type='attribute'><c- g>name</c-></dfn>;
  [<a id='the-input-element:cereactions-21' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-13'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-pattern' data-dfn-type='attribute'><c- g>pattern</c-></dfn>;
  [<a id='the-input-element:cereactions-22' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-14'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-placeholder' data-dfn-type='attribute'><c- g>placeholder</c-></dfn>;
  [<a id='the-input-element:cereactions-23' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-15'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-readonly' data-dfn-type='attribute'><c- g>readOnly</c-></dfn>;
  [<a id='the-input-element:cereactions-24' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-16'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-required' data-dfn-type='attribute'><c- g>required</c-></dfn>;
  [<a id='the-input-element:cereactions-25' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-17'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-size' data-dfn-type='attribute'><c- g>size</c-></dfn>;
  [<a id='the-input-element:cereactions-26' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflecturl' id='the-input-element:xattr-reflecturl'><c- g>ReflectURL</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-src' data-dfn-type='attribute'><c- g>src</c-></dfn>;
  [<a id='the-input-element:cereactions-27' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-18'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-step' data-dfn-type='attribute'><c- g>step</c-></dfn>;
  [<a id='the-input-element:cereactions-28' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-input-type' id='the-input-element:dom-input-type'><c- g>type</c-></a>;
  [<a id='the-input-element:cereactions-29' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-input-element:xattr-reflect-19'>Reflect</a>=&quot;<a href='#attr-input-value' id='the-input-element:attr-input-value-2'>value</a>&quot;] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLInputElement' id='dom-input-defaultvalue' data-dfn-type='attribute'><c- g>defaultValue</c-></dfn>;
  [<a id='the-input-element:cereactions-30' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> [<a id='the-input-element:legacynulltoemptystring' href='https://webidl.spec.whatwg.org/#LegacyNullToEmptyString' data-x-internal='legacynulltoemptystring'><c- g>LegacyNullToEmptyString</c-></a>] <c- b>DOMString</c-> <a href='#dom-input-value' id='the-input-element:dom-input-value'><c- g>value</c-></a>;
  <c- b>attribute</c-> <a href='https://webidl.spec.whatwg.org/#idl-object' id='the-input-element:idl-object' data-x-internal='idl-object'><c- b>object</c-></a>? <a href='#dom-input-valueasdate' id='the-input-element:dom-input-valueasdate'><c- g>valueAsDate</c-></a>;
  <c- b>attribute</c-> <c- b>unrestricted</c-> <c- b>double</c-> <a href='#dom-input-valueasnumber' id='the-input-element:dom-input-valueasnumber'><c- g>valueAsNumber</c-></a>;
  [<a id='the-input-element:cereactions-31' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-input-element:xattr-reflectsetter-4'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-input-width' id='the-input-element:dom-input-width'><c- g>width</c-></a>;

  <c- b>undefined</c-> <a href='#dom-input-stepup' id='the-input-element:dom-input-stepup'><c- g>stepUp</c-></a>(<c- b>optional</c-> <c- b>long</c-> <c- g>n</c-> = 1);
  <c- b>undefined</c-> <a href='#dom-input-stepdown' id='the-input-element:dom-input-stepdown'><c- g>stepDown</c-></a>(<c- b>optional</c-> <c- b>long</c-> <c- g>n</c-> = 1);

  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-willvalidate' id='the-input-element:dom-cva-willvalidate'><c- g>willValidate</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-input-element:validitystate' href='form-control-infrastructure.html#validitystate'><c- n>ValidityState</c-></a> <a href='form-control-infrastructure.html#dom-cva-validity' id='the-input-element:dom-cva-validity'><c- g>validity</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-cva-validationmessage' id='the-input-element:dom-cva-validationmessage'><c- g>validationMessage</c-></a>;
  <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-checkvalidity' id='the-input-element:dom-cva-checkvalidity'><c- g>checkValidity</c-></a>();
  <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-reportvalidity' id='the-input-element:dom-cva-reportvalidity'><c- g>reportValidity</c-></a>();
  <c- b>undefined</c-> <a href='form-control-infrastructure.html#dom-cva-setcustomvalidity' id='the-input-element:dom-cva-setcustomvalidity'><c- g>setCustomValidity</c-></a>(<c- b>DOMString</c-> <c- g>error</c->);

  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-input-element:nodelist' href='https://dom.spec.whatwg.org/#interface-nodelist' data-x-internal='nodelist'><c- n>NodeList</c-></a>? <a href='forms.html#dom-lfe-labels' id='the-input-element:dom-lfe-labels'><c- g>labels</c-></a>;

  <c- b>undefined</c-> <a href='form-control-infrastructure.html#dom-textarea/input-select' id='the-input-element:dom-textarea/input-select'><c- g>select</c-></a>();
  <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c->? <a href='form-control-infrastructure.html#dom-textarea/input-selectionstart' id='the-input-element:dom-textarea/input-selectionstart'><c- g>selectionStart</c-></a>;
  <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c->? <a href='form-control-infrastructure.html#dom-textarea/input-selectionend' id='the-input-element:dom-textarea/input-selectionend'><c- g>selectionEnd</c-></a>;
  <c- b>attribute</c-> <c- b>DOMString</c->? <a href='form-control-infrastructure.html#dom-textarea/input-selectiondirection' id='the-input-element:dom-textarea/input-selectiondirection'><c- g>selectionDirection</c-></a>;
  <c- b>undefined</c-> <a href='form-control-infrastructure.html#dom-textarea/input-setrangetext' id='the-input-element:dom-textarea/input-setrangetext'><c- g>setRangeText</c-></a>(<c- b>DOMString</c-> <c- g>replacement</c->);
  <c- b>undefined</c-> <a href='form-control-infrastructure.html#dom-textarea/input-setrangetext' id='the-input-element:dom-textarea/input-setrangetext-2'><c- g>setRangeText</c-></a>(<c- b>DOMString</c-> <c- g>replacement</c->, <c- b>unsigned</c-> <c- b>long</c-> <c- g>start</c->, <c- b>unsigned</c-> <c- b>long</c-> <c- g>end</c->, <c- b>optional</c-> <a id='the-input-element:selectionmode' href='form-control-infrastructure.html#selectionmode'><c- n>SelectionMode</c-></a> <c- g>selectionMode</c-> = &quot;preserve&quot;);
  <c- b>undefined</c-> <a href='form-control-infrastructure.html#dom-textarea/input-setselectionrange' id='the-input-element:dom-textarea/input-setselectionrange'><c- g>setSelectionRange</c-></a>(<c- b>unsigned</c-> <c- b>long</c-> <c- g>start</c->, <c- b>unsigned</c-> <c- b>long</c-> <c- g>end</c->, <c- b>optional</c-> <c- b>DOMString</c-> <c- g>direction</c->);

  <c- b>undefined</c-> <a href='#dom-input-showpicker' id='the-input-element:dom-input-showpicker'><c- g>showPicker</c-></a>();

  // <a href='obsolete.html#HTMLInputElement-partial'>also has obsolete members</a>
};
<a href='#htmlinputelement' id='the-input-element:htmlinputelement'><c- n>HTMLInputElement</c-></a> <c- b>includes</c-> <a id='the-input-element:popovertargetattributes' href='popover.html#popovertargetattributes'><c- n>PopoverTargetAttributes</c-></a>;</code></pre>
   </dl>

  <p>The <code id=the-input-element:the-input-element><a href=#the-input-element>input</a></code> element <a id=the-input-element:represents href=dom.html#represents>represents</a> a typed data field, usually with a form
  control to allow the user to edit the data.</p>

  <p>The <dfn data-dfn-for=input id=attr-input-type data-dfn-type=element-attr><code>type</code></dfn> attribute
  controls the data type (and associated control) of the element. It is an <a id=the-input-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated
  attribute</a> with the following keywords and states:</p>

  <table id=attr-input-type-keywords><thead><tr><th> Keyword
     <th> State
     <th> Data type
     <th> Control type
   <tbody><tr><td> <dfn data-dfn-for=input/type id=attr-input-type-hidden-keyword data-dfn-type=attr-value><code>hidden</code></dfn>
     <td> <a href="#hidden-state-(type=hidden)" id="the-input-element:hidden-state-(type=hidden)-6">Hidden</a>
     <td> An arbitrary string
     <td> n/a
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-text-keyword data-dfn-type=attr-value><code>text</code></dfn>
     <td> <a href="#text-(type=text)-state-and-search-state-(type=search)" id="the-input-element:text-(type=text)-state-and-search-state-(type=search)-3">Text</a>
     <td> Text with no line breaks
     <td> A text control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-search-keyword data-dfn-type=attr-value><code>search</code></dfn>
     <td> <a href="#text-(type=text)-state-and-search-state-(type=search)" id="the-input-element:text-(type=text)-state-and-search-state-(type=search)-4">Search</a>
     <td> Text with no line breaks
     <td> Search control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-tel-keyword data-dfn-type=attr-value><code>tel</code></dfn>
     <td> <a href="#telephone-state-(type=tel)" id="the-input-element:telephone-state-(type=tel)-2">Telephone</a>
     <td> Text with no line breaks
     <td> A text control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-url-keyword data-dfn-type=attr-value><code>url</code></dfn>
     <td> <a href="#url-state-(type=url)" id="the-input-element:url-state-(type=url)-2">URL</a>
     <td> An absolute URL
     <td> A text control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-email-keyword data-dfn-type=attr-value><code>email</code></dfn>
     <td> <a href="#email-state-(type=email)" id="the-input-element:email-state-(type=email)-2">Email</a>
     <td> An email address or list of email addresses
     <td> A text control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-password-keyword data-dfn-type=attr-value><code>password</code></dfn>
     <td> <a href="#password-state-(type=password)" id="the-input-element:password-state-(type=password)-2">Password</a>
     <td> Text with no line breaks (sensitive information)
     <td> A text control that obscures data entry
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-date-keyword data-dfn-type=attr-value><code>date</code></dfn>
     <td> <a href="#date-state-(type=date)" id="the-input-element:date-state-(type=date)-2">Date</a>
     <td> A date (year, month, day) with no time zone
     <td> A date control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-month-keyword data-dfn-type=attr-value><code>month</code></dfn>
     <td> <a href="#month-state-(type=month)" id="the-input-element:month-state-(type=month)-2">Month</a>
     <td> A date consisting of a year and a month with no time zone
     <td> A month control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-week-keyword data-dfn-type=attr-value><code>week</code></dfn>
     <td> <a href="#week-state-(type=week)" id="the-input-element:week-state-(type=week)-2">Week</a>
     <td> A date consisting of a week-year number and a week number with no time zone
     <td> A week control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-time-keyword data-dfn-type=attr-value><code>time</code></dfn>
     <td> <a href="#time-state-(type=time)" id="the-input-element:time-state-(type=time)-2">Time</a>
     <td> A time (hour, minute, seconds, fractional seconds) with no time zone
     <td> A time control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-datetime-local-keyword data-dfn-type=attr-value><code>datetime-local</code></dfn>
     <td> <a href="#local-date-and-time-state-(type=datetime-local)" id="the-input-element:local-date-and-time-state-(type=datetime-local)-2">Local Date and Time</a>
     <td> A date and time (year, month, day, hour, minute, second, fraction of a second) with no time zone
     <td> A date and time control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-number-keyword data-dfn-type=attr-value><code>number</code></dfn>
     <td> <a href="#number-state-(type=number)" id="the-input-element:number-state-(type=number)-2">Number</a>
     <td> A numerical value
     <td> A text control or spinner control
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-range-keyword data-dfn-type=attr-value><code>range</code></dfn>
     <td> <a href="#range-state-(type=range)" id="the-input-element:range-state-(type=range)-2">Range</a>
     <td> A numerical value, with the extra semantic that the exact value is not important
     <td> A slider control or similar
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-color-keyword data-dfn-type=attr-value><code>color</code></dfn>
     <td> <a href="#color-state-(type=color)" id="the-input-element:color-state-(type=color)-2">Color</a>
     <td> An sRGB color with 8-bit red, green, and blue components
     <td> A color picker
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-checkbox-keyword data-dfn-type=attr-value><code>checkbox</code></dfn>
     <td> <a href="#checkbox-state-(type=checkbox)" id="the-input-element:checkbox-state-(type=checkbox)-2">Checkbox</a>
     <td> A set of zero or more values from a predefined list
     <td> A checkbox
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-radio-keyword data-dfn-type=attr-value><code>radio</code></dfn>
     <td> <a href="#radio-button-state-(type=radio)" id="the-input-element:radio-button-state-(type=radio)-2">Radio Button</a>
     <td> An enumerated value
     <td> A radio button
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-file-keyword data-dfn-type=attr-value><code>file</code></dfn>
     <td> <a href="#file-upload-state-(type=file)" id="the-input-element:file-upload-state-(type=file)-3">File Upload</a>
     <td> Zero or more files each with a <a id=the-input-element:mime-type href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> and optionally a filename
     <td> A label and a button
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-submit-keyword data-dfn-type=attr-value><code>submit</code></dfn>
     <td> <a href="#submit-button-state-(type=submit)" id="the-input-element:submit-button-state-(type=submit)-2">Submit Button</a>
     <td> An enumerated value, with the extra semantic that it must be the last value selected and initiates form submission
     <td> A button
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-image-keyword data-dfn-type=attr-value><code>image</code></dfn>
     <td> <a href="#image-button-state-(type=image)" id="the-input-element:image-button-state-(type=image)-2">Image Button</a>
     <td> A coordinate, relative to a particular image's size, with the extra semantic that it must
     be the last value selected and initiates form submission
     <td> Either a clickable image, or a button
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-reset-keyword data-dfn-type=attr-value><code>reset</code></dfn>
     <td> <a href="#reset-button-state-(type=reset)" id="the-input-element:reset-button-state-(type=reset)-2">Reset Button</a>
     <td> n/a
     <td> A button
    <tr><td> <dfn data-dfn-for=input/type id=attr-input-type-button-keyword data-dfn-type=attr-value><code>button</code></dfn>
     <td> <a href="#button-state-(type=button)" id="the-input-element:button-state-(type=button)-2">Button</a>
     <td> n/a
     <td> A button
  </table>

  <p>The attribute's <i id=the-input-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-input-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <a href="#text-(type=text)-state-and-search-state-(type=search)" id="the-input-element:text-(type=text)-state-and-search-state-(type=search)-5">Text</a> state.</p>

  <p>Which of the
   <code id=the-input-element:attr-input-accept-2><a href=#attr-input-accept>accept</a></code>,
   <code id=the-input-element:attr-input-alpha-2><a href=#attr-input-alpha>alpha</a></code>,
   <code id=the-input-element:attr-input-alt-2><a href=#attr-input-alt>alt</a></code>,
   <code id=the-input-element:attr-fe-autocomplete-2><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id=the-input-element:attr-input-checked-3><a href=#attr-input-checked>checked</a></code>,
   <code id=the-input-element:attr-input-colorspace-2><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id=the-input-element:attr-fe-dirname-2><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id=the-input-element:attr-fs-formaction-2><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id=the-input-element:attr-fs-formenctype-2><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id=the-input-element:attr-fs-formmethod-2><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id=the-input-element:attr-fs-formnovalidate-2><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id=the-input-element:attr-fs-formtarget-2><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id=the-input-element:attr-dim-height-2><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id=the-input-element:attr-input-list-2><a href=#attr-input-list>list</a></code>,
   <code id=the-input-element:attr-input-max-2><a href=#attr-input-max>max</a></code>,
   <code id=the-input-element:attr-input-maxlength-2><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id=the-input-element:attr-input-min-2><a href=#attr-input-min>min</a></code>,
   <code id=the-input-element:attr-input-minlength-2><a href=#attr-input-minlength>minlength</a></code>,
   <code id=the-input-element:attr-input-multiple-2><a href=#attr-input-multiple>multiple</a></code>,
   <code id=the-input-element:attr-input-pattern-3><a href=#attr-input-pattern>pattern</a></code>,
   <code id=the-input-element:attr-input-placeholder-2><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id=the-input-element:attr-input-readonly-2><a href=#attr-input-readonly>readonly</a></code>,
   <code id=the-input-element:attr-input-required-2><a href=#attr-input-required>required</a></code>,
   <code id=the-input-element:attr-input-size-2><a href=#attr-input-size>size</a></code>,
   <code id=the-input-element:attr-input-src-2><a href=#attr-input-src>src</a></code>,
   <code id=the-input-element:attr-input-step-2><a href=#attr-input-step>step</a></code>, and
   <code id=the-input-element:attr-dim-width-2><a href=embedded-content-other.html#attr-dim-width>width</a></code> content attributes, the
   <code id=the-input-element:dom-input-checked-2><a href=#dom-input-checked>checked</a></code>,
   <code id=the-input-element:dom-input-files-2><a href=#dom-input-files>files</a></code>,
   <code id=the-input-element:dom-input-valueasdate-2><a href=#dom-input-valueasdate>valueAsDate</a></code>,
   <code id=the-input-element:dom-input-valueasnumber-2><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
   <code id=the-input-element:dom-input-list-2><a href=#dom-input-list>list</a></code> IDL attributes, the
   <code id=the-input-element:dom-textarea/input-select-2><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code> method, the
   <code id=the-input-element:dom-textarea/input-selectionstart-2><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id=the-input-element:dom-textarea/input-selectionend-2><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code id=the-input-element:dom-textarea/input-selectiondirection-2><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, IDL attributes, the
   <code id=the-input-element:dom-textarea/input-setrangetext-3><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code> and
   <code id=the-input-element:dom-textarea/input-setselectionrange-2><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods, the
   <code id=the-input-element:dom-input-stepup-2><a href=#dom-input-stepup>stepUp()</a></code> and
   <code id=the-input-element:dom-input-stepdown-2><a href=#dom-input-stepdown>stepDown()</a></code> methods, and the
   <code id=the-input-element:event-input><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and
   <code id=the-input-element:event-change><a href=indices.html#event-change>change</a></code> events <dfn id=concept-input-apply>apply</dfn> to an
   <code id=the-input-element:the-input-element-2><a href=#the-input-element>input</a></code> element depends on the state of its
   <code id=the-input-element:attr-input-type-28><a href=#attr-input-type>type</a></code> attribute.
  The subsections that define each type also clearly define in normative "bookkeeping" sections
  which of these feature apply, and which <dfn id=do-not-apply>do not apply</dfn>, to each type. The behavior of
  these features depends on whether they apply or not, as defined in their various sections (q.v.
  for <a href=#common-input-element-attributes>content attributes</a>, for <a href=#common-input-element-apis>APIs</a>, for <a href=#common-input-element-events>events</a>).</p>

  <p>The following table is non-normative and summarizes which of those
  content attributes, IDL attributes, methods, and events <a href=#concept-input-apply id=the-input-element:concept-input-apply>apply</a> to each state:</p>

  <table id=input-type-attr-summary class=applies><thead><tr><th>
     <th> <span><a href="#hidden-state-(type=hidden)" id="the-input-element:hidden-state-(type=hidden)-7">Hidden</a></span>
     <th> <span><a href="#text-(type=text)-state-and-search-state-(type=search)" id="the-input-element:text-(type=text)-state-and-search-state-(type=search)-6">Text</a>,</span>
          <span><a href="#text-(type=text)-state-and-search-state-(type=search)" id="the-input-element:text-(type=text)-state-and-search-state-(type=search)-7">Search</a></span>
     <th> <span><a href="#telephone-state-(type=tel)" id="the-input-element:telephone-state-(type=tel)-3">Telephone</a>,</span>
          <span><a href="#url-state-(type=url)" id="the-input-element:url-state-(type=url)-3">URL</a></span>
     <th> <span><a href="#email-state-(type=email)" id="the-input-element:email-state-(type=email)-3">Email</a></span>
     <th> <span><a href="#password-state-(type=password)" id="the-input-element:password-state-(type=password)-3">Password</a></span>
     <th> <span><a href="#date-state-(type=date)" id="the-input-element:date-state-(type=date)-3">Date</a>,</span>
          <span><a href="#month-state-(type=month)" id="the-input-element:month-state-(type=month)-3">Month</a>,</span>
          <span><a href="#week-state-(type=week)" id="the-input-element:week-state-(type=week)-3">Week</a>,</span>
          <span><a href="#time-state-(type=time)" id="the-input-element:time-state-(type=time)-3">Time</a></span>
     <th> <span><a href="#local-date-and-time-state-(type=datetime-local)" id="the-input-element:local-date-and-time-state-(type=datetime-local)-3">Local Date and Time</a></span>
     <th> <span><a href="#number-state-(type=number)" id="the-input-element:number-state-(type=number)-3">Number</a></span>
     <th> <span><a href="#range-state-(type=range)" id="the-input-element:range-state-(type=range)-3">Range</a></span>
     <th> <span><a href="#color-state-(type=color)" id="the-input-element:color-state-(type=color)-3">Color</a></span>
     <th> <span><a href="#checkbox-state-(type=checkbox)" id="the-input-element:checkbox-state-(type=checkbox)-3">Checkbox</a>,</span>
          <span><a href="#radio-button-state-(type=radio)" id="the-input-element:radio-button-state-(type=radio)-3">Radio Button</a></span>
     <th> <span><a href="#file-upload-state-(type=file)" id="the-input-element:file-upload-state-(type=file)-4">File Upload</a></span>
     <th> <span><a href="#submit-button-state-(type=submit)" id="the-input-element:submit-button-state-(type=submit)-3">Submit Button</a></span>
     <th> <span><a href="#image-button-state-(type=image)" id="the-input-element:image-button-state-(type=image)-3">Image Button</a></span>
     <th> <span><a href="#reset-button-state-(type=reset)" id="the-input-element:reset-button-state-(type=reset)-3">Reset Button</a>,</span>
          <span><a href="#button-state-(type=button)" id="the-input-element:button-state-(type=button)-3">Button</a></span>

   <tbody><tr><th colspan=16 scope=rowgroup>Content attributes

    <tr><th> <code id=the-input-element:attr-input-accept-3><a href=#attr-input-accept>accept</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-alpha-3><a href=#attr-input-alpha>alpha</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-alt-3><a href=#attr-input-alt>alt</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-fe-autocomplete-3><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>
     <td class=yes> Yes     
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-checked-4><a href=#attr-input-checked>checked</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-colorspace-3><a href=#attr-input-colorspace>colorspace</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-fe-dirname-3><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>
     <td class=yes> Yes     
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-fs-formaction-3><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-fs-formenctype-3><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-fs-formmethod-3><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-fs-formnovalidate-3><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-fs-formtarget-3><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-dim-height-3><a href=embedded-content-other.html#attr-dim-height>height</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-list-3><a href=#attr-input-list>list</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-max-3><a href=#attr-input-max>max</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-maxlength-3><a href=#attr-input-maxlength>maxlength</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-min-3><a href=#attr-input-min>min</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-minlength-3><a href=#attr-input-minlength>minlength</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-multiple-3><a href=#attr-input-multiple>multiple</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> ·  
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-pattern-4><a href=#attr-input-pattern>pattern</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-placeholder-3><a href=#attr-input-placeholder>placeholder</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-popovertarget-2><a href=popover.html#attr-popovertarget>popovertarget</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     


    <tr><th> <code id=the-input-element:attr-popovertargetaction-2><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     


    <tr><th> <code id=the-input-element:attr-input-readonly-3><a href=#attr-input-readonly>readonly</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-required-3><a href=#attr-input-required>required</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-size-3><a href=#attr-input-size>size</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-src-3><a href=#attr-input-src>src</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-input-step-3><a href=#attr-input-step>step</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:attr-dim-width-3><a href=embedded-content-other.html#attr-dim-width>width</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 


   <tbody><tr><th colspan=16 scope=rowgroup>IDL attributes and methods

    <tr><th> <code id=the-input-element:dom-input-checked-3><a href=#dom-input-checked>checked</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-input-files-3><a href=#dom-input-files>files</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-input-value-2><a href=#dom-input-value>value</a></code>
     <td class=yes> <a href=#dom-input-value-default id=the-input-element:dom-input-value-default>default</a> 
     <td class=yes> <a href=#dom-input-value-value id=the-input-element:dom-input-value-value>value</a> 

     <td class=yes> <a href=#dom-input-value-value id=the-input-element:dom-input-value-value-2>value</a> 
     <td class=yes> <a href=#dom-input-value-value id=the-input-element:dom-input-value-value-3>value</a> 
     <td class=yes> <a href=#dom-input-value-value id=the-input-element:dom-input-value-value-4>value</a> 
     <td class=yes> <a href=#dom-input-value-value id=the-input-element:dom-input-value-value-5>value</a> 



     <td class=yes> <a href=#dom-input-value-value id=the-input-element:dom-input-value-value-6>value</a> 
     <td class=yes> <a href=#dom-input-value-value id=the-input-element:dom-input-value-value-7>value</a> 
     <td class=yes> <a href=#dom-input-value-value id=the-input-element:dom-input-value-value-8>value</a> 
     <td class=yes> <a href=#dom-input-value-value id=the-input-element:dom-input-value-value-9>value</a> 
     <td class=yes> <a href=#dom-input-value-default-on id=the-input-element:dom-input-value-default-on>default/on</a> 

     <td class=yes> <a href=#dom-input-value-filename id=the-input-element:dom-input-value-filename>filename</a> 
     <td class=yes> <a href=#dom-input-value-default id=the-input-element:dom-input-value-default-2>default</a> 
     <td class=yes> <a href=#dom-input-value-default id=the-input-element:dom-input-value-default-3>default</a> 
     <td class=yes> <a href=#dom-input-value-default id=the-input-element:dom-input-value-default-4>default</a> 


    <tr><th> <code id=the-input-element:dom-input-valueasdate-3><a href=#dom-input-valueasdate>valueAsDate</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-input-valueasnumber-3><a href=#dom-input-valueasnumber>valueAsNumber</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-input-list-3><a href=#dom-input-list>list</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-textarea/input-select-3><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>
     <td class=no> ·     
     <td class=yes> Yes         

     <td class=yes> Yes         
     <td class=yes> Yes† 
     <td class=yes> Yes         
     <td class=yes> Yes† 



     <td class=yes> Yes† 
     <td class=yes> Yes† 
     <td class=no> ·     
     <td class=yes> Yes† 
     <td class=no> ·     

     <td class=yes> Yes† 
     <td class=no> ·     
     <td class=no> ·     
     <td class=no> ·     


    <tr><th> <code id=the-input-element:dom-textarea/input-selectionstart-3><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-textarea/input-selectionend-3><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-textarea/input-selectiondirection-3><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-textarea/input-setrangetext-4><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-textarea/input-setselectionrange-3><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=no> · 
     <td class=yes> Yes     
     <td class=no> · 



     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-input-stepdown-3><a href=#dom-input-stepdown>stepDown()</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <code id=the-input-element:dom-input-stepup-3><a href=#dom-input-stepup>stepUp()</a></code>
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 

     <td class=no> · 
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


   <tbody><tr><th colspan=16 scope=rowgroup>Events

    <tr><th> <span><code id=the-input-element:event-input-2><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> event</span>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


    <tr><th> <span><code id=the-input-element:event-change-2><a href=indices.html#event-change>change</a></code> event</span>
     <td class=no> · 
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     



     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     
     <td class=yes> Yes     

     <td class=yes> Yes     
     <td class=no> · 
     <td class=no> · 
     <td class=no> · 


  </table>

  <p class=tablenote><small>† If the control has no selectable text, the <code id=the-input-element:dom-textarea/input-select-4><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code> method results in a no-op, with no
  <a id=the-input-element:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-input-element:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</small></p>

  

  <p>Some states of the <code id=the-input-element:attr-input-type-29><a href=#attr-input-type>type</a></code> attribute define a <dfn id=value-sanitization-algorithm>value
  sanitization algorithm</dfn>.</p>

  <p>Each <code id=the-input-element:the-input-element-3><a href=#the-input-element>input</a></code> element has a <a href=form-control-infrastructure.html#concept-fe-value id=the-input-element:concept-fe-value>value</a>, which is
  exposed by the <code id=the-input-element:dom-input-value-3><a href=#dom-input-value>value</a></code> IDL attribute. Some states define an
  <dfn id=concept-input-value-string-number>algorithm to convert a string to a number</dfn>,
  an <dfn id=concept-input-value-number-string>algorithm to convert a number to a
  string</dfn>, an <dfn id=concept-input-value-string-date>algorithm to convert a string to a
  <code>Date</code> object</dfn>, and an <dfn id=concept-input-value-date-string>algorithm to
  convert a <code>Date</code> object to a string</dfn>, which are used by <code id=the-input-element:attr-input-max-4><a href=#attr-input-max>max</a></code>, <code id=the-input-element:attr-input-min-4><a href=#attr-input-min>min</a></code>, <code id=the-input-element:attr-input-step-4><a href=#attr-input-step>step</a></code>, <code id=the-input-element:dom-input-valueasdate-4><a href=#dom-input-valueasdate>valueAsDate</a></code>,
  <code id=the-input-element:dom-input-valueasnumber-4><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and <code id=the-input-element:dom-input-stepup-4><a href=#dom-input-stepup>stepUp()</a></code>.</p>

  <p>An <code id=the-input-element:the-input-element-4><a href=#the-input-element>input</a></code> element's <a href=form-control-infrastructure.html#concept-fe-dirty id=the-input-element:concept-fe-dirty>dirty value flag</a> must be
  set to true whenever the user interacts with the control in a way that changes the <a href=form-control-infrastructure.html#concept-fe-value id=the-input-element:concept-fe-value-2>value</a>. (It is also set to true when the value is programmatically
  changed, as described in the definition of the <code id=the-input-element:dom-input-value-4><a href=#dom-input-value>value</a></code> IDL
  attribute.)</p>

  

  <p>The <dfn data-dfn-for=input id=attr-input-value data-dfn-type=element-attr><code>value</code></dfn> content
  attribute gives the default <a href=form-control-infrastructure.html#concept-fe-value id=the-input-element:concept-fe-value-3>value</a> of the <code id=the-input-element:the-input-element-5><a href=#the-input-element>input</a></code>
  element. When the <code id=the-input-element:attr-input-value-3><a href=#attr-input-value>value</a></code> content attribute is
  added, set, or removed, if the control's <a href=form-control-infrastructure.html#concept-fe-dirty id=the-input-element:concept-fe-dirty-2>dirty value flag</a>
  is false, the user agent must set the <a href=form-control-infrastructure.html#concept-fe-value id=the-input-element:concept-fe-value-4>value</a> of the element
  to the value of the <code id=the-input-element:attr-input-value-4><a href=#attr-input-value>value</a></code> content attribute, if there is
  one, or the empty string otherwise, and then run the current <a href=#value-sanitization-algorithm id=the-input-element:value-sanitization-algorithm>value sanitization
  algorithm</a>, if one is defined.</p>

  

  <p>Each <code id=the-input-element:the-input-element-6><a href=#the-input-element>input</a></code> element has a <a href=form-control-infrastructure.html#concept-fe-checked id=the-input-element:concept-fe-checked>checkedness</a>,
  which is exposed by the <code id=the-input-element:dom-input-checked-4><a href=#dom-input-checked>checked</a></code> IDL attribute.</p>

  <p>Each <code id=the-input-element:the-input-element-7><a href=#the-input-element>input</a></code> element has a boolean <dfn id=concept-input-checked-dirty-flag>dirty checkedness flag</dfn>. When it is true, the
  element is said to have a <dfn id=concept-input-checked-dirty><i>dirty checkedness</i></dfn>.
  The <a href=#concept-input-checked-dirty-flag id=the-input-element:concept-input-checked-dirty-flag>dirty checkedness flag</a> must be initially
  set to false when the element is created, and must be set to true whenever the user interacts with
  the control in a way that changes the <a href=form-control-infrastructure.html#concept-fe-checked id=the-input-element:concept-fe-checked-2>checkedness</a>.</p>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#checked title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#checked</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-checked data-dfn-type=element-attr><code>checked</code></dfn>
  content attribute is a <a id=the-input-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a> that gives the default <a href=form-control-infrastructure.html#concept-fe-checked id=the-input-element:concept-fe-checked-3>checkedness</a> of the <code id=the-input-element:the-input-element-8><a href=#the-input-element>input</a></code> element. When the <code id=the-input-element:attr-input-checked-5><a href=#attr-input-checked>checked</a></code> content attribute is added, if
  the control does not have <i id=the-input-element:concept-input-checked-dirty><a href=#concept-input-checked-dirty>dirty checkedness</a></i>, the user
  agent must set the <a href=form-control-infrastructure.html#concept-fe-checked id=the-input-element:concept-fe-checked-4>checkedness</a> of the element to true;
  when the <code id=the-input-element:attr-input-checked-6><a href=#attr-input-checked>checked</a></code> content attribute is removed, if the
  control does not have <i id=the-input-element:concept-input-checked-dirty-2><a href=#concept-input-checked-dirty>dirty checkedness</a></i>, the user
  agent must set the <a href=form-control-infrastructure.html#concept-fe-checked id=the-input-element:concept-fe-checked-5>checkedness</a> of the element to
  false.</p>

  

  <p>The <a href=form-control-infrastructure.html#concept-form-reset-control id=the-input-element:concept-form-reset-control>reset algorithm</a> for <code id=the-input-element:the-input-element-9><a href=#the-input-element>input</a></code>
  elements is to set its <a id=the-input-element:user-validity href=form-control-infrastructure.html#user-validity>user validity</a>,
  <a href=form-control-infrastructure.html#concept-fe-dirty id=the-input-element:concept-fe-dirty-3>dirty value flag</a>, and
  <a href=#concept-input-checked-dirty-flag id=the-input-element:concept-input-checked-dirty-flag-2>dirty checkedness flag</a>
  back to false, set the <a href=form-control-infrastructure.html#concept-fe-value id=the-input-element:concept-fe-value-5>value</a> of the element to the value
  of the <code id=the-input-element:attr-input-value-5><a href=#attr-input-value>value</a></code> content attribute, if there is one, or the
  empty string otherwise, set the <a href=form-control-infrastructure.html#concept-fe-checked id=the-input-element:concept-fe-checked-6>checkedness</a> of the
  element to true if the element has a <code id=the-input-element:attr-input-checked-7><a href=#attr-input-checked>checked</a></code> content
  attribute and false if it does not, empty the list of <a href=#concept-input-type-file-selected id=the-input-element:concept-input-type-file-selected>selected files</a>, and then invoke the <a href=#value-sanitization-algorithm id=the-input-element:value-sanitization-algorithm-2>value
  sanitization algorithm</a>, if the <code id=the-input-element:attr-input-type-30><a href=#attr-input-type>type</a></code> attribute's
  current state defines one.</p>

  <p>Each <code id=the-input-element:the-input-element-10><a href=#the-input-element>input</a></code> element can be <i id=the-input-element:concept-fe-mutable><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>. Except where
  otherwise specified, an <code id=the-input-element:the-input-element-11><a href=#the-input-element>input</a></code> element is always <i id=the-input-element:concept-fe-mutable-2><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>. Similarly, except where otherwise specified, the user
  agent should not allow the user to modify the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-input-element:concept-fe-value-6>value</a> or <a href=form-control-infrastructure.html#concept-fe-checked id=the-input-element:concept-fe-checked-7>checkedness</a>.</p>

  <p>When an <code id=the-input-element:the-input-element-12><a href=#the-input-element>input</a></code> element is <a href=form-control-infrastructure.html#concept-fe-disabled id=the-input-element:concept-fe-disabled>disabled</a>, it is not <i id=the-input-element:concept-fe-mutable-3><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>.</p>

  <p class=note>The <code id=the-input-element:attr-input-readonly-4><a href=#attr-input-readonly>readonly</a></code> attribute can also in some
  cases (e.g. for the <a href="#date-state-(type=date)" id="the-input-element:date-state-(type=date)-4">Date</a> state, but not the <a href="#checkbox-state-(type=checkbox)" id="the-input-element:checkbox-state-(type=checkbox)-4">Checkbox</a> state) stop an <code id=the-input-element:the-input-element-13><a href=#the-input-element>input</a></code> element from
  being <i id=the-input-element:concept-fe-mutable-4><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>.</p>

  <p>The <code id=the-input-element:the-input-element-14><a href=#the-input-element>input</a></code> element can <dfn id=input-support-picker>support a picker</dfn>. A
  picker is a user interface element that allows the end user to choose a value. Whether an
  <code id=the-input-element:the-input-element-15><a href=#the-input-element>input</a></code> element supports a picker depends on the <code id=the-input-element:attr-input-type-31><a href=#attr-input-type>type</a></code> attribute state and <a id=the-input-element:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a>
  behavior. An <code id=the-input-element:the-input-element-16><a href=#the-input-element>input</a></code> element must support a picker when its <code id=the-input-element:attr-input-type-32><a href=#attr-input-type>type</a></code> attribute is in the <a href="#file-upload-state-(type=file)" id="the-input-element:file-upload-state-(type=file)-5">File
  Upload</a> state.</p>

  <div class=note>
   <p>As of the time of this writing, typical browser implementations show such picker UI for:</p>

   <ul><li><p><code id=the-input-element:the-input-element-17><a href=#the-input-element>input</a></code> elements whose <code id=the-input-element:attr-input-type-33><a href=#attr-input-type>type</a></code>
    attributes are in the <a href="#date-state-(type=date)" id="the-input-element:date-state-(type=date)-5">Date</a>, <a href="#month-state-(type=month)" id="the-input-element:month-state-(type=month)-4">Month</a>, <a href="#week-state-(type=week)" id="the-input-element:week-state-(type=week)-4">Week</a>,
    <a href="#time-state-(type=time)" id="the-input-element:time-state-(type=time)-4">Time</a>, <a href="#local-date-and-time-state-(type=datetime-local)" id="the-input-element:local-date-and-time-state-(type=datetime-local)-4">Local Date and Time</a>, and <a href="#color-state-(type=color)" id="the-input-element:color-state-(type=color)-4">Color</a> states;<li><p><code id=the-input-element:the-input-element-18><a href=#the-input-element>input</a></code> elements in various states that have a <a href=#concept-input-list id=the-input-element:concept-input-list>suggestions source element</a>;<li><p><code id=the-input-element:the-input-element-19><a href=#the-input-element>input</a></code> elements whose <code id=the-input-element:attr-input-type-34><a href=#attr-input-type>type</a></code> attribute
    is in the <a href="#file-upload-state-(type=file)" id="the-input-element:file-upload-state-(type=file)-6">File Upload</a> state; and<li><p><code id=the-input-element:the-select-element><a href=form-elements.html#the-select-element>select</a></code> elements.</ul>
  </div>

  <p>The <a href=https://dom.spec.whatwg.org/#concept-node-clone-ext id=the-input-element:concept-node-clone-ext data-x-internal=concept-node-clone-ext>cloning steps</a> for <code id=the-input-element:the-input-element-20><a href=#the-input-element>input</a></code> elements
  given <var>node</var>, <var>copy</var>, and <var>subtree</var> are to propagate the <a href=form-control-infrastructure.html#concept-fe-value id=the-input-element:concept-fe-value-7>value</a>, <a href=form-control-infrastructure.html#concept-fe-dirty id=the-input-element:concept-fe-dirty-4>dirty value flag</a>,
  <a href=form-control-infrastructure.html#concept-fe-checked id=the-input-element:concept-fe-checked-8>checkedness</a>, and <a href=#concept-input-checked-dirty-flag id=the-input-element:concept-input-checked-dirty-flag-3>dirty checkedness flag</a> from <var>node</var> to
  <var>copy</var>.</p>

  <p>The <a id=the-input-element:activation-behaviour href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation behavior</a> for <code id=the-input-element:the-input-element-21><a href=#the-input-element>input</a></code> elements <var>element</var>, given
  <var>event</var>, are these steps:</p>

  <ol><li><p>If <var>element</var> is not <i id=the-input-element:concept-fe-mutable-5><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, and
   <var>element</var>'s <code id=the-input-element:attr-input-type-35><a href=#attr-input-type>type</a></code> attribute is neither in the <a href="#checkbox-state-(type=checkbox)" id="the-input-element:checkbox-state-(type=checkbox)-5">Checkbox</a> nor in the <a href="#radio-button-state-(type=radio)" id="the-input-element:radio-button-state-(type=radio)-4">Radio</a> state, then return.<li><p>Run <var>element</var>'s <dfn id=input-activation-behavior>input activation behavior</dfn>, if any, and do nothing
   otherwise.<li><p>If <var>element</var> has a <a id=the-input-element:form-owner href=form-control-infrastructure.html#form-owner>form owner</a> and <var>element</var>'s <code id=the-input-element:attr-input-type-36><a href=#attr-input-type>type</a></code> attribute is not in the <a href="#button-state-(type=button)" id="the-input-element:button-state-(type=button)-4">Button</a> state, then return.<li><p>Run the <a id=the-input-element:popover-target-attribute-activation-behavior href=popover.html#popover-target-attribute-activation-behavior>popover target attribute activation behavior</a> given <var>element</var>
   and <var>event</var>'s <a href=https://dom.spec.whatwg.org/#concept-event-target id=the-input-element:concept-event-target data-x-internal=concept-event-target>target</a>.</ol>

  <p class=note>Recall that an element's <a id=the-input-element:activation-behaviour-2 href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation behavior</a> runs for both
  user-initiated activations and for synthetic activations (e.g., via <code>el.click()</code>). User agents might also have behaviors for a given control — not
  specified here — that are triggered only by true user-initiated activations. A common choice is to
  <a href=#show-the-picker,-if-applicable id=the-input-element:show-the-picker,-if-applicable>show the picker, if applicable</a>, for the control. In contrast, the <a href=#input-activation-behavior id=the-input-element:input-activation-behavior>input
  activation behavior</a> only shows pickers for the special historical cases of the <a href="#file-upload-state-(type=file)" id="the-input-element:file-upload-state-(type=file)-7">File Upload</a> and <a href="#color-state-(type=color)" id="the-input-element:color-state-(type=color)-5">Color</a> states.</p>

  <p>The <a id=the-input-element:legacy-pre-activation-behavior href=https://dom.spec.whatwg.org/#eventtarget-legacy-pre-activation-behavior data-x-internal=legacy-pre-activation-behavior>legacy-pre-activation behavior</a> for <code id=the-input-element:the-input-element-22><a href=#the-input-element>input</a></code> elements are these
  steps:</p>

  <ol><li><p>If this element's <code id=the-input-element:attr-input-type-37><a href=#attr-input-type>type</a></code> attribute is in the <a href="#checkbox-state-(type=checkbox)" id="the-input-element:checkbox-state-(type=checkbox)-6">Checkbox state</a>, then set this element's <a href=form-control-infrastructure.html#concept-fe-checked id=the-input-element:concept-fe-checked-9>checkedness</a> to its opposite value (i.e. true if it is false,
   false if it is true) and set this element's <code id=the-input-element:dom-input-indeterminate-2><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute to false.<li><p>If this element's <code id=the-input-element:attr-input-type-38><a href=#attr-input-type>type</a></code> attribute is in the <a href="#radio-button-state-(type=radio)" id="the-input-element:radio-button-state-(type=radio)-5">Radio Button state</a>, then get a reference to the element in
   this element's <a href=#radio-button-group id=the-input-element:radio-button-group>radio button group</a> that has its <a href=form-control-infrastructure.html#concept-fe-checked id=the-input-element:concept-fe-checked-10>checkedness</a> set to true, if any, and then set this element's
   <a href=form-control-infrastructure.html#concept-fe-checked id=the-input-element:concept-fe-checked-11>checkedness</a> to true.</ol>

  <p>The <a id=the-input-element:legacy-canceled-activation-behavior href=https://dom.spec.whatwg.org/#eventtarget-legacy-canceled-activation-behavior data-x-internal=legacy-canceled-activation-behavior>legacy-canceled-activation behavior</a> for <code id=the-input-element:the-input-element-23><a href=#the-input-element>input</a></code> elements are these
  steps:</p>

  <ol><li><p>If the element's <code id=the-input-element:attr-input-type-39><a href=#attr-input-type>type</a></code> attribute is in the <a href="#checkbox-state-(type=checkbox)" id="the-input-element:checkbox-state-(type=checkbox)-7">Checkbox state</a>, then set the element's <a href=form-control-infrastructure.html#concept-fe-checked id=the-input-element:concept-fe-checked-12>checkedness</a> and the element's <code id=the-input-element:dom-input-indeterminate-3><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute back to the values they had
   before the <a id=the-input-element:legacy-pre-activation-behavior-2 href=https://dom.spec.whatwg.org/#eventtarget-legacy-pre-activation-behavior data-x-internal=legacy-pre-activation-behavior>legacy-pre-activation behavior</a> was run.<li><p>If this element's <code id=the-input-element:attr-input-type-40><a href=#attr-input-type>type</a></code> attribute is in the <a href="#radio-button-state-(type=radio)" id="the-input-element:radio-button-state-(type=radio)-6">Radio Button state</a>, then if the element to which a
   reference was obtained in the <a id=the-input-element:legacy-pre-activation-behavior-3 href=https://dom.spec.whatwg.org/#eventtarget-legacy-pre-activation-behavior data-x-internal=legacy-pre-activation-behavior>legacy-pre-activation behavior</a>, if any, is still in
   what is now this element's <a href=#radio-button-group id=the-input-element:radio-button-group-2>radio button group</a>, if it still has one, and if so,
   set that element's <a href=form-control-infrastructure.html#concept-fe-checked id=the-input-element:concept-fe-checked-13>checkedness</a> to true; or else, if
   there was no such element, or that element is no longer in this element's <a href=#radio-button-group id=the-input-element:radio-button-group-3>radio button
   group</a>, or if this element no longer has a <a href=#radio-button-group id=the-input-element:radio-button-group-4>radio button group</a>, set this
   element's <a href=form-control-infrastructure.html#concept-fe-checked id=the-input-element:concept-fe-checked-14>checkedness</a> to false.
  </ol>

  

  <hr>

  <p>When an <code id=the-input-element:the-input-element-24><a href=#the-input-element>input</a></code> element is first created, the element's rendering and behavior must
  be set to the rendering and behavior defined for the <code id=the-input-element:attr-input-type-41><a href=#attr-input-type>type</a></code>
  attribute's state, and the <a href=#value-sanitization-algorithm id=the-input-element:value-sanitization-algorithm-3>value sanitization algorithm</a>, if one is defined for the
  <code id=the-input-element:attr-input-type-42><a href=#attr-input-type>type</a></code> attribute's state, must be invoked.</p>

  

  <div id=input-type-change>

  <p>When an <code id=the-input-element:the-input-element-25><a href=#the-input-element>input</a></code> element's <code id=the-input-element:attr-input-type-43><a href=#attr-input-type>type</a></code> attribute
  changes state, the user agent must run the following steps:</p>

  <ol><li><p>If the previous state of the element's <code id=the-input-element:attr-input-type-44><a href=#attr-input-type>type</a></code> attribute
   put the <code id=the-input-element:dom-input-value-5><a href=#dom-input-value>value</a></code> IDL attribute in the <i id=the-input-element:dom-input-value-value-10><a href=#dom-input-value-value>value</a></i> mode, and the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-input-element:concept-fe-value-8>value</a> is not the empty string, and the new state of the element's
   <code id=the-input-element:attr-input-type-45><a href=#attr-input-type>type</a></code> attribute puts the <code id=the-input-element:dom-input-value-6><a href=#dom-input-value>value</a></code> IDL attribute in either the <i id=the-input-element:dom-input-value-default-5><a href=#dom-input-value-default>default</a></i> mode or the <i id=the-input-element:dom-input-value-default-on-2><a href=#dom-input-value-default-on>default/on</a></i> mode, then set the element's <code id=the-input-element:attr-input-value-6><a href=#attr-input-value>value</a></code> content attribute to the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-input-element:concept-fe-value-9>value</a>.<li><p>Otherwise, if the previous state of the element's <code id=the-input-element:attr-input-type-46><a href=#attr-input-type>type</a></code> attribute put the <code id=the-input-element:dom-input-value-7><a href=#dom-input-value>value</a></code>
   IDL attribute in any mode other than the <i id=the-input-element:dom-input-value-value-11><a href=#dom-input-value-value>value</a></i> mode, and the
   new state of the element's <code id=the-input-element:attr-input-type-47><a href=#attr-input-type>type</a></code> attribute puts the <code id=the-input-element:dom-input-value-8><a href=#dom-input-value>value</a></code> IDL attribute in the <i id=the-input-element:dom-input-value-value-12><a href=#dom-input-value-value>value</a></i> mode, then set the <a href=form-control-infrastructure.html#concept-fe-value id=the-input-element:concept-fe-value-10>value</a> of the element to the value of the <code id=the-input-element:attr-input-value-7><a href=#attr-input-value>value</a></code> content attribute, if there is one, or the empty string
   otherwise, and then set the control's <a href=form-control-infrastructure.html#concept-fe-dirty id=the-input-element:concept-fe-dirty-5>dirty value flag</a> to
   false.<li><p>Otherwise, if the previous state of the element's <code id=the-input-element:attr-input-type-48><a href=#attr-input-type>type</a></code> attribute put the <code id=the-input-element:dom-input-value-9><a href=#dom-input-value>value</a></code> IDL attribute in any mode other than the <i id=the-input-element:dom-input-value-filename-2><a href=#dom-input-value-filename>filename</a></i> mode, and the new state of the element's <code id=the-input-element:attr-input-type-49><a href=#attr-input-type>type</a></code> attribute puts the <code id=the-input-element:dom-input-value-10><a href=#dom-input-value>value</a></code> IDL attribute in the <i id=the-input-element:dom-input-value-filename-3><a href=#dom-input-value-filename>filename</a></i> mode, then set the <a href=form-control-infrastructure.html#concept-fe-value id=the-input-element:concept-fe-value-11>value</a> of the element to the empty string.<li><p>Update the element's rendering and behavior to the new state's.<li><p><dfn id=signal-a-type-change>Signal a type change</dfn> for the element. (The <a href="#radio-button-state-(type=radio)" id="the-input-element:radio-button-state-(type=radio)-7">Radio Button</a> state uses this, in particular.)<li><p>Invoke the <a href=#value-sanitization-algorithm id=the-input-element:value-sanitization-algorithm-4>value sanitization algorithm</a>, if one is defined for the <code id=the-input-element:attr-input-type-50><a href=#attr-input-type>type</a></code> attribute's new state.<li><p>Let <var>previouslySelectable</var> be true if <code id=the-input-element:dom-textarea/input-setrangetext-5><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code> previously <a href=#concept-input-apply id=the-input-element:concept-input-apply-2>applied</a> to the element, and false otherwise.<li><p>Let <var>nowSelectable</var> be true if <code id=the-input-element:dom-textarea/input-setrangetext-6><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code> now <a href=#concept-input-apply id=the-input-element:concept-input-apply-3>applies</a> to the element, and false otherwise.<li><p>If <var>previouslySelectable</var> is false and <var>nowSelectable</var> is true, set the
   element's <a href=form-control-infrastructure.html#concept-textarea/input-cursor id=the-input-element:concept-textarea/input-cursor>text entry cursor position</a> to the
   beginning of the text control, and <a href=form-control-infrastructure.html#set-the-selection-direction id=the-input-element:set-the-selection-direction>set its selection
   direction</a> to "<code>none</code>".</ol>

  </div>

  <hr>

  <p>
  The <code id=the-input-element:attr-fe-name-2><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute represents the element's name.
  The <code id=the-input-element:attr-fe-dirname-4><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code> attribute controls how the element's <a href=dom.html#the-directionality id=the-input-element:the-directionality-2>directionality</a> is submitted.
  The <code id=the-input-element:attr-fe-disabled-2><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> attribute is used to make the control non-interactive and to prevent its value from being submitted.
  The <code id=the-input-element:attr-fae-form-2><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> attribute is used to explicitly associate the <code id=the-input-element:the-input-element-26><a href=#the-input-element>input</a></code> element with its <a id=the-input-element:form-owner-2 href=form-control-infrastructure.html#form-owner>form owner</a>.
  The <code id=the-input-element:attr-fe-autocomplete-4><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> attribute controls how the user agent provides autofill behavior.
  </p>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#indeterminate title="The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of <input> elements.">HTMLInputElement#indeterminate</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.6+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>≤12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>≤12.1+</span></span><hr><span class=caniuse><span><a href="https://caniuse.com/#feat=indeterminate-checkbox" title="indeterminate checkbox">caniuse.com table</a></span></span></div></div></div><p>The <dfn data-dfn-for=HTMLInputElement id=dom-input-indeterminate data-dfn-type=attribute><code>indeterminate</code></dfn> IDL attribute must initially be set to
  false. On getting, it must return the last value it was set to. On setting, it must be set to the
  new value. It has no effect except for changing the appearance of <a href="#checkbox-state-(type=checkbox)" id="the-input-element:checkbox-state-(type=checkbox)-8">checkbox</a> controls.</p>

  <p>The <dfn data-dfn-for=HTMLInputElement id=dom-input-colorspace data-dfn-type=attribute><code>colorSpace</code></dfn> IDL attribute must <a id=the-input-element:reflect href=common-dom-interfaces.html#reflect>reflect</a> the
  <code id=the-input-element:attr-input-colorspace-4><a href=#attr-input-colorspace>colorspace</a></code> content attribute, <a id=the-input-element:limited-to-only-known-values href=common-dom-interfaces.html#limited-to-only-known-values>limited to only
  known values</a>. The <dfn data-dfn-for=HTMLInputElement id=dom-input-type data-dfn-type=attribute><code>type</code></dfn> IDL attribute must <a id=the-input-element:reflect-2 href=common-dom-interfaces.html#reflect>reflect</a> the respective
  content attribute of the same name, <a id=the-input-element:limited-to-only-known-values-2 href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>.</p>

  <p>The IDL attributes <dfn data-dfn-for=HTMLInputElement id=dom-input-width data-dfn-type=attribute><code>width</code></dfn> and <dfn data-dfn-for=HTMLInputElement id=dom-input-height data-dfn-type=attribute><code>height</code></dfn> must return the rendered width and height of the
  image, in <a href=https://drafts.csswg.org/css-values/#px id="the-input-element:'px'" data-x-internal="'px'">CSS pixels</a>, if an image is <a id=the-input-element:being-rendered href=rendering.html#being-rendered>being rendered</a>; or
  else the <a href=https://drafts.csswg.org/css-images/#natural-dimensions id=the-input-element:natural-dimensions data-x-internal=natural-dimensions>natural width and height</a> of the image, in
  <a href=https://drafts.csswg.org/css-values/#px id="the-input-element:'px'-2" data-x-internal="'px'">CSS pixels</a>, if an image is <i id=the-input-element:input-img-available><a href=#input-img-available>available</a></i> but not <a id=the-input-element:being-rendered-2 href=rendering.html#being-rendered>being rendered</a>; or else 0,
  if no image is <i id=the-input-element:input-img-available-2><a href=#input-img-available>available</a></i>. When the <code id=the-input-element:the-input-element-27><a href=#the-input-element>input</a></code>
  element's <code id=the-input-element:attr-input-type-51><a href=#attr-input-type>type</a></code> attribute is not in the <a href="#image-button-state-(type=image)" id="the-input-element:image-button-state-(type=image)-4">Image Button</a> state, then no image is <i id=the-input-element:input-img-available-3><a href=#input-img-available>available</a></i>. <a href=references.html#refsCSS>[CSS]</a></p>

  <p>The <code id=the-input-element:dom-cva-willvalidate-2><a href=form-control-infrastructure.html#dom-cva-willvalidate>willValidate</a></code>, <code id=the-input-element:dom-cva-validity-2><a href=form-control-infrastructure.html#dom-cva-validity>validity</a></code>, and <code id=the-input-element:dom-cva-validationmessage-2><a href=form-control-infrastructure.html#dom-cva-validationmessage>validationMessage</a></code> IDL attributes, and the <code id=the-input-element:dom-cva-checkvalidity-2><a href=form-control-infrastructure.html#dom-cva-checkvalidity>checkValidity()</a></code>, <code id=the-input-element:dom-cva-reportvalidity-2><a href=form-control-infrastructure.html#dom-cva-reportvalidity>reportValidity()</a></code>, and <code id=the-input-element:dom-cva-setcustomvalidity-2><a href=form-control-infrastructure.html#dom-cva-setcustomvalidity>setCustomValidity()</a></code> methods, are part of the
  <a id=the-input-element:the-constraint-validation-api href=form-control-infrastructure.html#the-constraint-validation-api>constraint validation API</a>. The <code id=the-input-element:dom-lfe-labels-2><a href=forms.html#dom-lfe-labels>labels</a></code> IDL
  attribute provides a list of the element's <code id=the-input-element:the-label-element><a href=forms.html#the-label-element>label</a></code>s. The <code id=the-input-element:dom-textarea/input-select-5><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>, <code id=the-input-element:dom-textarea/input-selectionstart-4><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>, <code id=the-input-element:dom-textarea/input-selectionend-4><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>, <code id=the-input-element:dom-textarea/input-selectiondirection-4><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, <code id=the-input-element:dom-textarea/input-setrangetext-7><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and <code id=the-input-element:dom-textarea/input-setselectionrange-4><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods and IDL attributes
  expose the element's text selection. The <code id=the-input-element:dom-fe-disabled><a href=#dom-fe-disabled>disabled</a></code>,
  <code id=the-input-element:dom-fae-form-2><a href=form-control-infrastructure.html#dom-fae-form>form</a></code>, and <code id=the-input-element:dom-fe-name><a href=#dom-fe-name>name</a></code> IDL attributes
  are part of the element's forms API.</p>

  



  <h5 id=states-of-the-type-attribute><span class=secno>4.10.5.1</span> States of the <code id=states-of-the-type-attribute:attr-input-type><a href=#attr-input-type>type</a></code> attribute<a href=#states-of-the-type-attribute class=self-link></a></h5>


  <h6 id="hidden-state-(type=hidden)"><span class=secno>4.10.5.1.1</span> <dfn data-dfn-for=input data-dfn-type=element-state>Hidden</dfn> state (<code>type=hidden</code>)<a href="#hidden-state-(type=hidden)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden title="<input> elements of type hidden let web developers include data that cannot be seen or modified by users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token. Hidden inputs are completely invisible in the rendered page, and there is no way to make it visible in the page's content.">Element/input/hidden</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>2+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>When an <code id="hidden-state-(type=hidden):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="hidden-state-(type=hidden):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#hidden-state-(type=hidden)" id="hidden-state-(type=hidden):hidden-state-(type=hidden)">Hidden</a> state, the rules in this section apply.</p>

  

  <p>The <code id="hidden-state-(type=hidden):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="hidden-state-(type=hidden):represents" href=dom.html#represents>represents</a> a value that is not intended to be
  examined or manipulated by the user.</p>

  

  <p><strong>Constraint validation</strong>: If an <code id="hidden-state-(type=hidden):the-input-element-3"><a href=#the-input-element>input</a></code> element's <code id="hidden-state-(type=hidden):attr-input-type-2"><a href=#attr-input-type>type</a></code> attribute is in the <a href="#hidden-state-(type=hidden)" id="hidden-state-(type=hidden):hidden-state-(type=hidden)-2">Hidden</a> state, it is <a id="hidden-state-(type=hidden):barred-from-constraint-validation" href=form-control-infrastructure.html#barred-from-constraint-validation>barred from constraint
  validation</a>.</p>

  

  <p>If the <code id="hidden-state-(type=hidden):attr-fe-name"><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute is present and has a value that is an
  <a id="hidden-state-(type=hidden):ascii-case-insensitive" href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for "<code id="hidden-state-(type=hidden):attr-fe-name-charset"><a href=form-control-infrastructure.html#attr-fe-name-charset>_charset_</a></code>", then the element's <code id="hidden-state-(type=hidden):attr-input-value"><a href=#attr-input-value>value</a></code> attribute must be omitted.</p>

  <div class=bookkeeping>

   <p>The
   <code id="hidden-state-(type=hidden):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> and
   <code id="hidden-state-(type=hidden):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>
   content attributes <a href=#concept-input-apply id="hidden-state-(type=hidden):concept-input-apply">apply</a> to this element.</p>

   <p>The
   <code id="hidden-state-(type=hidden):dom-input-value"><a href=#dom-input-value>value</a></code>
   IDL attribute <a href=#concept-input-apply id="hidden-state-(type=hidden):concept-input-apply-2">applies</a> to this element and is
   in mode <a href=#dom-input-value-default id="hidden-state-(type=hidden):dom-input-value-default">default</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="hidden-state-(type=hidden):do-not-apply">do not
   apply</a> to the element:
   <code id="hidden-state-(type=hidden):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="hidden-state-(type=hidden):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="hidden-state-(type=hidden):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="hidden-state-(type=hidden):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="hidden-state-(type=hidden):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="hidden-state-(type=hidden):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="hidden-state-(type=hidden):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="hidden-state-(type=hidden):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="hidden-state-(type=hidden):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-required"><a href=#attr-input-required>required</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="hidden-state-(type=hidden):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="hidden-state-(type=hidden):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="hidden-state-(type=hidden):do-not-apply-2">do not apply</a> to the
   element:
   <code id="hidden-state-(type=hidden):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="hidden-state-(type=hidden):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="hidden-state-(type=hidden):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="hidden-state-(type=hidden):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="hidden-state-(type=hidden):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="hidden-state-(type=hidden):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="hidden-state-(type=hidden):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="hidden-state-(type=hidden):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="hidden-state-(type=hidden):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="hidden-state-(type=hidden):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="hidden-state-(type=hidden):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="hidden-state-(type=hidden):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="hidden-state-(type=hidden):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="hidden-state-(type=hidden):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="hidden-state-(type=hidden):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#do-not-apply id="hidden-state-(type=hidden):do-not-apply-3">do not apply</a>.</p>

  </div>


  <h6 id="text-(type=text)-state-and-search-state-(type=search)"><span class=secno>4.10.5.1.2</span> <dfn data-dfn-for=input data-dfn-type=element-state>Text</dfn> (<code>type=text</code>) state and <dfn data-dfn-for=input data-dfn-type=element-state>Search</dfn> state (<code>type=search</code>)<a href="#text-(type=text)-state-and-search-state-(type=search)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search title="<input> elements of type search are text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently by the user agent.">Element/input/search</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>5+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text title="<input> elements of type text create basic single-line text fields.">Element/input/text</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  

  <p>When an <code id="text-(type=text)-state-and-search-state-(type=search):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#text-(type=text)-state-and-search-state-(type=search)" id="text-(type=text)-state-and-search-state-(type=search):text-(type=text)-state-and-search-state-(type=search)">Text</a> state or the <a href="#text-(type=text)-state-and-search-state-(type=search)" id="text-(type=text)-state-and-search-state-(type=search):text-(type=text)-state-and-search-state-(type=search)-2">Search</a> state, the rules in this section apply.</p>

  

  <p>The <code id="text-(type=text)-state-and-search-state-(type=search):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="text-(type=text)-state-and-search-state-(type=search):represents" href=dom.html#represents>represents</a> a one line plain text edit control for
  the element's <a href=form-control-infrastructure.html#concept-fe-value id="text-(type=text)-state-and-search-state-(type=search):concept-fe-value">value</a>.</p>

  <p class=note>The difference between the <a href="#text-(type=text)-state-and-search-state-(type=search)" id="text-(type=text)-state-and-search-state-(type=search):text-(type=text)-state-and-search-state-(type=search)-3">Text</a> state
  and the <a href="#text-(type=text)-state-and-search-state-(type=search)" id="text-(type=text)-state-and-search-state-(type=search):text-(type=text)-state-and-search-state-(type=search)-4">Search</a> state is primarily stylistic: on
  platforms where search controls are distinguished from regular text controls, the <a href="#text-(type=text)-state-and-search-state-(type=search)" id="text-(type=text)-state-and-search-state-(type=search):text-(type=text)-state-and-search-state-(type=search)-5">Search</a> state might result in an appearance consistent with
  the platform's search controls rather than appearing like a regular text control.</p>

  

  <p>If the element is <i id="text-(type=text)-state-and-search-state-(type=search):concept-fe-mutable"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, its <a href=form-control-infrastructure.html#concept-fe-value id="text-(type=text)-state-and-search-state-(type=search):concept-fe-value-2">value</a> should be editable by the user. User agents must not allow
  users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the element's
  <a href=form-control-infrastructure.html#concept-fe-value id="text-(type=text)-state-and-search-state-(type=search):concept-fe-value-3">value</a>.</p>

  
  
  <p>If the element is <i id="text-(type=text)-state-and-search-state-(type=search):concept-fe-mutable-2"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, the user agent should allow the
  user to change the writing direction of the element, setting it either to a left-to-right writing
  direction or a right-to-left writing direction. If the user does so, the user agent must then run
  the following steps:</p>

  <ol><li><p>Set the element's <code id="text-(type=text)-state-and-search-state-(type=search):attr-dir"><a href=dom.html#attr-dir>dir</a></code> attribute to "<code id="text-(type=text)-state-and-search-state-(type=search):attr-dir-ltr"><a href=dom.html#attr-dir-ltr>ltr</a></code>" if the user selected a left-to-right writing direction, and
   "<code id="text-(type=text)-state-and-search-state-(type=search):attr-dir-rtl"><a href=dom.html#attr-dir-rtl>rtl</a></code>" if the user selected a right-to-left writing
   direction.<li><p><a id="text-(type=text)-state-and-search-state-(type=search):queue-an-element-task" href=webappapis.html#queue-an-element-task>Queue an element task</a> on the <a id="text-(type=text)-state-and-search-state-(type=search):user-interaction-task-source" href=webappapis.html#user-interaction-task-source>user interaction task source</a> given
   the element to <a href=https://dom.spec.whatwg.org/#concept-event-fire id="text-(type=text)-state-and-search-state-(type=search):concept-event-fire" data-x-internal=concept-event-fire>fire an event</a> named <code id="text-(type=text)-state-and-search-state-(type=search):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> at the element, with the <code id="text-(type=text)-state-and-search-state-(type=search):dom-event-bubbles"><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> and <code id="text-(type=text)-state-and-search-state-(type=search):dom-event-composed"><a data-x-internal=dom-event-composed href=https://dom.spec.whatwg.org/#dom-event-composed>composed</a></code>
   attributes initialized to true.</ol>

  

  <p>The <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified, must have a value that
  contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.</p>

  

  <p><strong>The <a href=#value-sanitization-algorithm id="text-(type=text)-state-and-search-state-(type=search):value-sanitization-algorithm">value sanitization algorithm</a> is as follows</strong>: <a id="text-(type=text)-state-and-search-state-(type=search):strip-newlines" href=https://infra.spec.whatwg.org/#strip-newlines data-x-internal=strip-newlines>Strip
  newlines</a> from the <a href=form-control-infrastructure.html#concept-fe-value id="text-(type=text)-state-and-search-state-(type=search):concept-fe-value-4">value</a>.</p>

  

  <div class=bookkeeping>

   <p>The following common <code id="text-(type=text)-state-and-search-state-(type=search):the-input-element-3"><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods <a href=#concept-input-apply id="text-(type=text)-state-and-search-state-(type=search):concept-input-apply">apply</a> to the element:
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-size"><a href=#attr-input-size>size</a></code> content attributes;
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, and
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attributes;
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

   <p>The <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value id="text-(type=text)-state-and-search-state-(type=search):dom-input-value-value">value</a>.</p>

   <p>The <code id="text-(type=text)-state-and-search-state-(type=search):event-input-2"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="text-(type=text)-state-and-search-state-(type=search):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="text-(type=text)-state-and-search-state-(type=search):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="text-(type=text)-state-and-search-state-(type=search):do-not-apply">do not
   apply</a> to the element:
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="text-(type=text)-state-and-search-state-(type=search):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="text-(type=text)-state-and-search-state-(type=search):do-not-apply-2">do not apply</a> to the
   element:
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code id="text-(type=text)-state-and-search-state-(type=search):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>


  <h6 id="telephone-state-(type=tel)"><span class=secno>4.10.5.1.3</span> <dfn data-dfn-for=input data-dfn-type=element-state>Telephone</dfn> state (<code>type=tel</code>)<a href="#telephone-state-(type=tel)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel title="<input> elements of type tel are used to let the user enter and edit a telephone number. Unlike <input type=&quot;email&quot;> and <input type=&quot;url&quot;>, the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.">Element/input/tel</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>Yes</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>18+</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  

  <p>When an <code id="telephone-state-(type=tel):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="telephone-state-(type=tel):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#telephone-state-(type=tel)" id="telephone-state-(type=tel):telephone-state-(type=tel)">Telephone</a> state, the rules in this section apply.</p>

  

  <p>The <code id="telephone-state-(type=tel):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="telephone-state-(type=tel):represents" href=dom.html#represents>represents</a> a control for editing a telephone number
  given in the element's <a href=form-control-infrastructure.html#concept-fe-value id="telephone-state-(type=tel):concept-fe-value">value</a>.</p>

  

  <p>If the element is <i id="telephone-state-(type=tel):concept-fe-mutable"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, its <a href=form-control-infrastructure.html#concept-fe-value id="telephone-state-(type=tel):concept-fe-value-2">value</a> should be editable by the user. User agents may change the
  spacing and, with care, the punctuation of <a href=form-control-infrastructure.html#concept-fe-value id="telephone-state-(type=tel):concept-fe-value-3">values</a> that the
  user enters. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE
  RETURN (CR) characters into the element's <a href=form-control-infrastructure.html#concept-fe-value id="telephone-state-(type=tel):concept-fe-value-4">value</a>.</p>

  

  <p>The <code id="telephone-state-(type=tel):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified, must have a value that
  contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.</p>

  

  <p><strong>The <a href=#value-sanitization-algorithm id="telephone-state-(type=tel):value-sanitization-algorithm">value sanitization algorithm</a> is as follows</strong>: <a id="telephone-state-(type=tel):strip-newlines" href=https://infra.spec.whatwg.org/#strip-newlines data-x-internal=strip-newlines>Strip
  newlines</a> from the <a href=form-control-infrastructure.html#concept-fe-value id="telephone-state-(type=tel):concept-fe-value-5">value</a>.</p>

  

  <p class=note>Unlike the <a href="#url-state-(type=url)" id="telephone-state-(type=tel):url-state-(type=url)">URL</a> and <a href="#email-state-(type=email)" id="telephone-state-(type=tel):email-state-(type=email)">Email</a> types, the <a href="#telephone-state-(type=tel)" id="telephone-state-(type=tel):telephone-state-(type=tel)-2">Telephone</a> type does not enforce a particular syntax. This is
  intentional; in practice, telephone number fields tend to be free-form fields, because there are a
  wide variety of valid phone numbers. Systems that need to enforce a particular format are
  encouraged to use the <code id="telephone-state-(type=tel):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code> attribute or the <code id="telephone-state-(type=tel):dom-cva-setcustomvalidity"><a href=form-control-infrastructure.html#dom-cva-setcustomvalidity>setCustomValidity()</a></code> method to hook into the client-side
  validation mechanism.</p>


  <div class=bookkeeping>

   <p>The following common <code id="telephone-state-(type=tel):the-input-element-3"><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods <a href=#concept-input-apply id="telephone-state-(type=tel):concept-input-apply">apply</a> to the element:
   <code id="telephone-state-(type=tel):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="telephone-state-(type=tel):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="telephone-state-(type=tel):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="telephone-state-(type=tel):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="telephone-state-(type=tel):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="telephone-state-(type=tel):attr-input-pattern-2"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="telephone-state-(type=tel):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="telephone-state-(type=tel):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="telephone-state-(type=tel):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="telephone-state-(type=tel):attr-input-size"><a href=#attr-input-size>size</a></code> content attributes;
   <code id="telephone-state-(type=tel):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="telephone-state-(type=tel):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="telephone-state-(type=tel):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="telephone-state-(type=tel):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, and
   <code id="telephone-state-(type=tel):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attributes;
   <code id="telephone-state-(type=tel):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="telephone-state-(type=tel):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="telephone-state-(type=tel):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

   <p>The <code id="telephone-state-(type=tel):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value id="telephone-state-(type=tel):dom-input-value-value">value</a>.</p>

   <p>The <code id="telephone-state-(type=tel):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="telephone-state-(type=tel):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="telephone-state-(type=tel):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="telephone-state-(type=tel):do-not-apply">do not
   apply</a> to the element:
   <code id="telephone-state-(type=tel):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="telephone-state-(type=tel):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="telephone-state-(type=tel):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="telephone-state-(type=tel):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="telephone-state-(type=tel):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="telephone-state-(type=tel):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="telephone-state-(type=tel):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="telephone-state-(type=tel):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="telephone-state-(type=tel):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="telephone-state-(type=tel):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="telephone-state-(type=tel):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="telephone-state-(type=tel):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="telephone-state-(type=tel):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="telephone-state-(type=tel):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="telephone-state-(type=tel):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="telephone-state-(type=tel):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="telephone-state-(type=tel):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="telephone-state-(type=tel):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="telephone-state-(type=tel):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="telephone-state-(type=tel):do-not-apply-2">do not apply</a> to the
   element:
   <code id="telephone-state-(type=tel):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="telephone-state-(type=tel):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="telephone-state-(type=tel):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="telephone-state-(type=tel):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="telephone-state-(type=tel):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code id="telephone-state-(type=tel):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>


  <h6 id="url-state-(type=url)"><span class=secno>4.10.5.1.4</span> <dfn data-dfn-for=input data-dfn-type=element-state>URL</dfn> state (<code>type=url</code>)<a href="#url-state-(type=url)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url title="<input> elements of type url are used to let the user enter and edit a URL.">Element/input/url</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>When an <code id="url-state-(type=url):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="url-state-(type=url):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#url-state-(type=url)" id="url-state-(type=url):url-state-(type=url)">URL</a> state, the rules in this section apply.</p>

  

  <p>The <code id="url-state-(type=url):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="url-state-(type=url):represents" href=dom.html#represents>represents</a> a control for editing a single
  <a id="url-state-(type=url):absolute-url" href=https://url.spec.whatwg.org/#syntax-url-absolute data-x-internal=absolute-url>absolute URL</a> given in the element's <a href=form-control-infrastructure.html#concept-fe-value id="url-state-(type=url):concept-fe-value">value</a>.</p>

  

  <p>If the element is <i id="url-state-(type=url):concept-fe-mutable"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, the user agent should allow the
  user to change the URL represented by its <a href=form-control-infrastructure.html#concept-fe-value id="url-state-(type=url):concept-fe-value-2">value</a>. User agents
  may allow the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="url-state-(type=url):concept-fe-value-3">value</a> to a string that is not
  a <a href=https://url.spec.whatwg.org/#valid-url-string id="url-state-(type=url):valid-url-string" data-x-internal=valid-url-string>valid</a> <a id="url-state-(type=url):absolute-url-2" href=https://url.spec.whatwg.org/#syntax-url-absolute data-x-internal=absolute-url>absolute URL</a>, but may also or instead
  automatically escape characters entered by the user so that the <a href=form-control-infrastructure.html#concept-fe-value id="url-state-(type=url):concept-fe-value-4">value</a> is always a <a href=https://url.spec.whatwg.org/#valid-url-string id="url-state-(type=url):valid-url-string-2" data-x-internal=valid-url-string>valid</a>
  <a id="url-state-(type=url):absolute-url-3" href=https://url.spec.whatwg.org/#syntax-url-absolute data-x-internal=absolute-url>absolute URL</a> (even if that isn't the actual value seen and edited by the user in the
  interface). User agents should allow the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="url-state-(type=url):concept-fe-value-5">value</a> to the empty string. User agents must not allow users to
  insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the <a href=form-control-infrastructure.html#concept-fe-value id="url-state-(type=url):concept-fe-value-6">value</a>.</p>

  

  <p>The <code id="url-state-(type=url):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not empty, must
  have a value that is a <a id="url-state-(type=url):valid-url-potentially-surrounded-by-spaces" href=urls-and-fetching.html#valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by spaces</a> that is also an
  <a id="url-state-(type=url):absolute-url-4" href=https://url.spec.whatwg.org/#syntax-url-absolute data-x-internal=absolute-url>absolute URL</a>.</p>

  

  <p><strong>The <a href=#value-sanitization-algorithm id="url-state-(type=url):value-sanitization-algorithm">value sanitization algorithm</a> is as follows</strong>: <a id="url-state-(type=url):strip-newlines" href=https://infra.spec.whatwg.org/#strip-newlines data-x-internal=strip-newlines>Strip
  newlines</a> from the <a href=form-control-infrastructure.html#concept-fe-value id="url-state-(type=url):concept-fe-value-7">value</a>, then <a id="url-state-(type=url):strip-leading-and-trailing-ascii-whitespace" href=https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace data-x-internal=strip-leading-and-trailing-ascii-whitespace>strip leading
  and trailing ASCII whitespace</a> from the <a href=form-control-infrastructure.html#concept-fe-value id="url-state-(type=url):concept-fe-value-8">value</a>.</p>

  <p><strong>Constraint validation</strong>: While the <a href=form-control-infrastructure.html#concept-fe-value id="url-state-(type=url):concept-fe-value-9">value</a>
  of the element is neither the empty string nor a <a href=https://url.spec.whatwg.org/#valid-url-string id="url-state-(type=url):valid-url-string-3" data-x-internal=valid-url-string>valid</a>
  <a id="url-state-(type=url):absolute-url-5" href=https://url.spec.whatwg.org/#syntax-url-absolute data-x-internal=absolute-url>absolute URL</a>, the element is <a id="url-state-(type=url):suffering-from-a-type-mismatch" href=form-control-infrastructure.html#suffering-from-a-type-mismatch>suffering from a type mismatch</a>.</p>

  

  <div class=bookkeeping>

   <p>The following common <code id="url-state-(type=url):the-input-element-3"><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods <a href=#concept-input-apply id="url-state-(type=url):concept-input-apply">apply</a> to the element:
   <code id="url-state-(type=url):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="url-state-(type=url):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="url-state-(type=url):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="url-state-(type=url):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="url-state-(type=url):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="url-state-(type=url):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="url-state-(type=url):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="url-state-(type=url):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="url-state-(type=url):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="url-state-(type=url):attr-input-size"><a href=#attr-input-size>size</a></code> content attributes;
   <code id="url-state-(type=url):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="url-state-(type=url):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="url-state-(type=url):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="url-state-(type=url):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, and
   <code id="url-state-(type=url):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attributes;
   <code id="url-state-(type=url):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="url-state-(type=url):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="url-state-(type=url):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

   <p>The <code id="url-state-(type=url):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value id="url-state-(type=url):dom-input-value-value">value</a>.</p>

   <p>The <code id="url-state-(type=url):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="url-state-(type=url):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="url-state-(type=url):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="url-state-(type=url):do-not-apply">do not
   apply</a> to the element:
   <code id="url-state-(type=url):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="url-state-(type=url):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="url-state-(type=url):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="url-state-(type=url):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="url-state-(type=url):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="url-state-(type=url):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="url-state-(type=url):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="url-state-(type=url):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="url-state-(type=url):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="url-state-(type=url):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="url-state-(type=url):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="url-state-(type=url):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="url-state-(type=url):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="url-state-(type=url):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="url-state-(type=url):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="url-state-(type=url):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="url-state-(type=url):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="url-state-(type=url):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="url-state-(type=url):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="url-state-(type=url):do-not-apply-2">do not apply</a> to the
   element:
   <code id="url-state-(type=url):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="url-state-(type=url):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="url-state-(type=url):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="url-state-(type=url):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="url-state-(type=url):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code id="url-state-(type=url):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>

  <div class=example>

   <p>If a document contained the following markup:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;url&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;location&quot;</c-> <c- e>list</c-><c- o>=</c-><c- s>&quot;urls&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;urls&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;MIME: Format of Internet Message Bodies&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;https://www.rfc-editor.org/rfc/rfc2045&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;HTML&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;https://html.spec.whatwg.org/&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;DOM&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;https://dom.spec.whatwg.org/&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Fullscreen&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;https://fullscreen.spec.whatwg.org/&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Media Session&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;https://mediasession.spec.whatwg.org/&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;The Single UNIX Specification, Version 3&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;http://www.unix.org/version3/&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c-></code></pre>

   <p>...and the user had typed "<kbd>spec.w</kbd>", and the user agent had also found that the user
   had visited <code>https://url.spec.whatwg.org/#url-parsing</code> and <code>https://streams.spec.whatwg.org/</code> in the recent past, then the rendering might look
   like this:</p>

   <p><img class=darkmode-aware src=../images/sample-url.svg width=480 alt="A text box with an icon on the left followed by the text &quot;spec.w&quot; and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URLs on the left, with the first four having grayed out labels on the right; and a scrollbar to the right of the drop down box, indicating further values are available." height=150></p>

   <p>The first four URLs in this sample consist of the four URLs in the author-specified list that
   match the text the user has entered, sorted in some <a id="url-state-(type=url):implementation-defined" href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> manner
   (maybe by how frequently the user refers to those URLs). Note how the UA is using the knowledge
   that the values are URLs to allow the user to omit the scheme part and perform intelligent
   matching on the domain name.</p>

   <p>The last two URLs (and probably many more, given the scrollbar's indications of more values
   being available) are the matches from the user agent's session history data. This data is not
   made available to the page DOM. In this particular case, the UA has no titles to provide for
   those values.</p>

  </div>


  <h6 id="email-state-(type=email)"><span class=secno>4.10.5.1.5</span> <dfn data-dfn-for=input data-dfn-type=element-state>Email</dfn> state (<code>type=email</code>)<span id="e-mail-state-(type=email)"></span><a href="#email-state-(type=email)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email title="<input> elements of type email are used to let the user enter and edit an email address, or, if the multiple attribute is specified, a list of email addresses.">Element/input/email</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>5+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  

  <p>When an <code id="email-state-(type=email):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="email-state-(type=email):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#email-state-(type=email)" id="email-state-(type=email):email-state-(type=email)">Email</a> state, the rules in this section apply.</p>

  

  <p>How the <a href="#email-state-(type=email)" id="email-state-(type=email):email-state-(type=email)-2">Email</a> state operates depends on whether the
  <code id="email-state-(type=email):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code> attribute is specified or not.</p>

  <dl class=switch><dt>When the <code id="email-state-(type=email):attr-input-multiple-2"><a href=#attr-input-multiple>multiple</a></code> attribute is not specified on the
   element<dd>
    <p>The <code id="email-state-(type=email):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="email-state-(type=email):represents" href=dom.html#represents>represents</a> a control for editing an email
    address given in the element's <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value">value</a>.</p>

    

    <p>If the element is <i id="email-state-(type=email):concept-fe-mutable"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, the user agent should allow the
    user to change the email address represented by its <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-2">value</a>. User agents may allow the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-3">value</a> to a string that is not a <a href=#valid-e-mail-address id="email-state-(type=email):valid-e-mail-address">valid email
    address</a>. The user agent should act in a manner consistent with expecting the user to
    provide a single email address. User agents should allow the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-4">value</a> to the empty string. User agents must not allow users to
    insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-5">value</a>. User agents may transform the <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-6">value</a> for display and editing; in particular, user agents should
    convert punycode in the domain labels of the <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-7">value</a> to IDN in the display and
    vice versa.</p>

    <p><strong>Constraint validation</strong>: While the user interface is representing input that
    the user agent cannot convert to punycode, the control is <a id="email-state-(type=email):suffering-from-bad-input" href=form-control-infrastructure.html#suffering-from-bad-input>suffering from bad
    input</a>.</p>

    

    <p>The <code id="email-state-(type=email):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not empty, must
    have a value that is a single <a href=#valid-e-mail-address id="email-state-(type=email):valid-e-mail-address-2">valid email address</a>.</p>

    

    <p><strong>The <a href=#value-sanitization-algorithm id="email-state-(type=email):value-sanitization-algorithm">value sanitization algorithm</a> is as follows</strong>: <a id="email-state-(type=email):strip-newlines" href=https://infra.spec.whatwg.org/#strip-newlines data-x-internal=strip-newlines>Strip
    newlines</a> from the <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-8">value</a>, then <a id="email-state-(type=email):strip-leading-and-trailing-ascii-whitespace" href=https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace data-x-internal=strip-leading-and-trailing-ascii-whitespace>strip leading
    and trailing ASCII whitespace</a> from the <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-9">value</a>.</p>

    <p><strong>Constraint validation</strong>: While the <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-10">value</a>
    of the element is neither the empty string nor a single <a href=#valid-e-mail-address id="email-state-(type=email):valid-e-mail-address-3">valid email address</a>, the
    element is <a id="email-state-(type=email):suffering-from-a-type-mismatch" href=form-control-infrastructure.html#suffering-from-a-type-mismatch>suffering from a type mismatch</a>.</p>

    
   <dt>When the <code id="email-state-(type=email):attr-input-multiple-3"><a href=#attr-input-multiple>multiple</a></code> attribute <em>is</em> specified on
   the element<dd>
    <p>The <code id="email-state-(type=email):the-input-element-3"><a href=#the-input-element>input</a></code> element <a id="email-state-(type=email):represents-2" href=dom.html#represents>represents</a> a control for adding, removing, and
    editing the email addresses given in the element's <a href=form-control-infrastructure.html#concept-fe-values id="email-state-(type=email):concept-fe-values">value<em>s</em></a>.</p>

    

    <p>If the element is <i id="email-state-(type=email):concept-fe-mutable-2"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, the user agent should allow the
    user to add, remove, and edit the email addresses represented by its <a href=form-control-infrastructure.html#concept-fe-values id="email-state-(type=email):concept-fe-values-2">values</a>. User agents may allow the user to set any
    individual value in the list of <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-11">value<em>s</em></a> to a
    string that is not a <a href=#valid-e-mail-address id="email-state-(type=email):valid-e-mail-address-4">valid email address</a>, but must not allow users to set any
    individual value to a string containing U+002C COMMA (,), U+000A LINE FEED (LF), or U+000D
    CARRIAGE RETURN (CR) characters. User agents should allow the user to remove all the addresses
    in the element's <a href=form-control-infrastructure.html#concept-fe-values id="email-state-(type=email):concept-fe-values-3">values</a>. User agents may
    transform the <a href=form-control-infrastructure.html#concept-fe-values id="email-state-(type=email):concept-fe-values-4">values</a> for display and editing; in
    particular, user agents should convert punycode in the domain labels of the <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-12">value</a> to IDN in the display and vice versa.</p>

    <p><strong>Constraint validation</strong>: While the user interface describes a situation where
    an individual value contains a U+002C COMMA (,) or is representing input that the user agent
    cannot convert to punycode, the control is <a id="email-state-(type=email):suffering-from-bad-input-2" href=form-control-infrastructure.html#suffering-from-bad-input>suffering from bad input</a>.</p>

    <p>Whenever the user changes the element's <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-13">value<em>s</em></a>, the user agent must run the following
    steps:</p>

    <ol><li><p>Let <var>latest values</var> be a copy of the element's <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-14">value<em>s</em></a>.<li><p><a id="email-state-(type=email):strip-leading-and-trailing-ascii-whitespace-2" href=https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace data-x-internal=strip-leading-and-trailing-ascii-whitespace>Strip leading and trailing ASCII whitespace</a> from each value in <var>latest
     values</var>.<li><p>Set the element's <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-15">value</a> to the result of
     concatenating all the values in <var>latest values</var>, separating each value from
     the next by a single U+002C COMMA character (,), maintaining the list's order.</ol>

    

    <p>The <code id="email-state-(type=email):attr-input-value-2"><a href=#attr-input-value>value</a></code> attribute, if specified, must have a value
    that is a <a href=#valid-e-mail-address-list id="email-state-(type=email):valid-e-mail-address-list">valid email address list</a>.</p>

    

    <p><strong>The <a href=#value-sanitization-algorithm id="email-state-(type=email):value-sanitization-algorithm-2">value sanitization algorithm</a> is as follows</strong>:</p>

    <ol><li><p><a href=https://infra.spec.whatwg.org/#split-on-commas id="email-state-(type=email):split-a-string-on-commas" data-x-internal=split-a-string-on-commas>Split on commas</a> the element's <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-16">value</a>, <a id="email-state-(type=email):strip-leading-and-trailing-ascii-whitespace-3" href=https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace data-x-internal=strip-leading-and-trailing-ascii-whitespace>strip leading and trailing ASCII
     whitespace</a> from each resulting token, if any, and let the element's <a href=form-control-infrastructure.html#concept-fe-values id="email-state-(type=email):concept-fe-values-5">values</a> be the (possibly empty) resulting list of
     (possibly empty) tokens, maintaining the original order.<li><p>Set the element's <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-17">value</a> to the result of
     concatenating the element's <a href=form-control-infrastructure.html#concept-fe-values id="email-state-(type=email):concept-fe-values-6">values</a>, separating
     each value from the next by a single U+002C COMMA character (,), maintaining the list's
     order.</ol>

    <p><strong>Constraint validation</strong>: While the <a href=form-control-infrastructure.html#concept-fe-value id="email-state-(type=email):concept-fe-value-18">value</a>
    of the element is not a <a href=#valid-e-mail-address-list id="email-state-(type=email):valid-e-mail-address-list-2">valid email address list</a>, the element is <a id="email-state-(type=email):suffering-from-a-type-mismatch-2" href=form-control-infrastructure.html#suffering-from-a-type-mismatch>suffering
    from a type mismatch</a>.</p>

    
   </dl>

  <p>When the <code id="email-state-(type=email):attr-input-multiple-4"><a href=#attr-input-multiple>multiple</a></code> attribute is set or removed, the
  user agent must run the <a href=#value-sanitization-algorithm id="email-state-(type=email):value-sanitization-algorithm-3">value sanitization algorithm</a>.</p>

  <p>A <dfn id=valid-e-mail-address>valid email address</dfn> is a string that matches the <code>email</code> production of the following ABNF, the character set for which is Unicode.
  This ABNF implements the extensions described in RFC 1123. <a href=references.html#refsABNF>[ABNF]</a> <a href=references.html#refsRFC5322>[RFC5322]</a>
  <a href=references.html#refsRFC1034>[RFC1034]</a> <a href=references.html#refsRFC1123>[RFC1123]</a></p>

  <pre><code class='abnf'><c- nc>email</c->         <c- o>=</c-> <c- o>1*</c-><c- p>(</c-> <c- nc>atext</c-> <c- o>/</c-> <c- l>&quot;.&quot;</c-> <c- p>)</c-> <c- l>&quot;@&quot;</c-> <c- nc>label</c-> <c- o>*</c-><c- p>(</c-> <c- l>&quot;.&quot;</c-> <c- nc>label</c-> <c- p>)</c->
<c- nc>label</c->         <c- o>=</c-> <c- nc>let-dig</c-> <c- p>[</c-> <c- p>[</c-> <c- nc>ldh-str</c-> <c- p>]</c-> <c- nc>let-dig</c-> <c- p>]</c->  <c- c1>; limited to a length of 63 characters by </c-><a href='https://www.rfc-editor.org/rfc/rfc1034#section-3.5'><c- c1>RFC 1034 section 3.5</c-></a>
<c- nc>atext</c->         <c- o>=</c-> &lt; <c- nc>as</c-> <c- nc>defined</c-> <c- nc>in</c-> <a href='https://www.rfc-editor.org/rfc/rfc5322#section-3.2.3'><c- nc>RFC</c-> <c- o>5322</c-> <c- nc>section</c-> <c- o>3</c->.<c- o>2</c->.<c- o>3</c-></a> &gt;
<c- nc>let-dig</c->       <c- o>=</c-> &lt; <c- nc>as</c-> <c- nc>defined</c-> <c- nc>in</c-> <a href='https://www.rfc-editor.org/rfc/rfc1034#section-3.5'><c- nc>RFC</c-> <c- o>1034</c-> <c- nc>section</c-> <c- o>3</c->.<c- o>5</c-></a> &gt;
<c- nc>ldh-str</c->       <c- o>=</c-> &lt; <c- nc>as</c-> <c- nc>defined</c-> <c- nc>in</c-> <a href='https://www.rfc-editor.org/rfc/rfc1034#section-3.5'><c- nc>RFC</c-> <c- o>1034</c-> <c- nc>section</c-> <c- o>3</c->.<c- o>5</c-></a> &gt;</code></pre>

  

  <p class=note>This requirement is a <a id="email-state-(type=email):willful-violation" href=https://infra.spec.whatwg.org/#willful-violation data-x-internal=willful-violation>willful violation</a> of RFC 5322, which defines a
  syntax for email addresses that is simultaneously too strict (before the "@" character), too
  vague (after the "@" character), and too lax (allowing comments, whitespace characters, and quoted
  strings in manners unfamiliar to most users) to be of practical use here.</p>

  <div class=note>

   <p>The following JavaScript- and Perl-compatible regular expression is an implementation of the
   above definition.</p>

   <pre>/^[a-zA-Z0-9.!#$%&amp;'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/</pre>

   

  </div>

  <p>A <dfn id=valid-e-mail-address-list>valid email address list</dfn> is a <a id="email-state-(type=email):set-of-comma-separated-tokens" href=common-microsyntaxes.html#set-of-comma-separated-tokens>set of
  comma-separated tokens</a>, where each token is itself a <a href=#valid-e-mail-address id="email-state-(type=email):valid-e-mail-address-5">valid email address</a>.
  To obtain the list of tokens from a <a href=#valid-e-mail-address-list id="email-state-(type=email):valid-e-mail-address-list-3">valid email address list</a>, an
  implementation must <a href=https://infra.spec.whatwg.org/#split-on-commas id="email-state-(type=email):split-a-string-on-commas-2" data-x-internal=split-a-string-on-commas>split the string on
  commas</a>.</p>

  <div class=bookkeeping>

   <p>The following common <code id="email-state-(type=email):the-input-element-4"><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods <a href=#concept-input-apply id="email-state-(type=email):concept-input-apply">apply</a> to the element:
   <code id="email-state-(type=email):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="email-state-(type=email):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="email-state-(type=email):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="email-state-(type=email):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="email-state-(type=email):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="email-state-(type=email):attr-input-multiple-5"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="email-state-(type=email):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="email-state-(type=email):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="email-state-(type=email):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="email-state-(type=email):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="email-state-(type=email):attr-input-size"><a href=#attr-input-size>size</a></code> content attributes;
   <code id="email-state-(type=email):dom-input-list"><a href=#dom-input-list>list</a></code> and
   <code id="email-state-(type=email):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attributes;
   <code id="email-state-(type=email):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code> method.</p>



   <p>The <code id="email-state-(type=email):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value id="email-state-(type=email):dom-input-value-value">value</a>.</p>

   <p>The <code id="email-state-(type=email):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="email-state-(type=email):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="email-state-(type=email):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="email-state-(type=email):do-not-apply">do not
   apply</a> to the element:
   <code id="email-state-(type=email):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="email-state-(type=email):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="email-state-(type=email):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="email-state-(type=email):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="email-state-(type=email):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="email-state-(type=email):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="email-state-(type=email):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="email-state-(type=email):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="email-state-(type=email):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="email-state-(type=email):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="email-state-(type=email):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="email-state-(type=email):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="email-state-(type=email):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="email-state-(type=email):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="email-state-(type=email):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="email-state-(type=email):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="email-state-(type=email):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="email-state-(type=email):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="email-state-(type=email):do-not-apply-2">do not apply</a> to the
   element:
   <code id="email-state-(type=email):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="email-state-(type=email):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="email-state-(type=email):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="email-state-(type=email):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="email-state-(type=email):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="email-state-(type=email):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="email-state-(type=email):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="email-state-(type=email):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="email-state-(type=email):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="email-state-(type=email):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code id="email-state-(type=email):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>


  <h6 id="password-state-(type=password)"><span class=secno>4.10.5.1.6</span> <dfn data-dfn-for=input data-dfn-type=element-state>Password</dfn> state (<code>type=password</code>)<a href="#password-state-(type=password)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password title="<input> elements of type password provide a way for the user to securely enter a password.">Element/input/password</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>2+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>2+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>When an <code id="password-state-(type=password):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="password-state-(type=password):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#password-state-(type=password)" id="password-state-(type=password):password-state-(type=password)">Password</a> state, the rules in this section
  apply.</p>

  

  <p>The <code id="password-state-(type=password):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="password-state-(type=password):represents" href=dom.html#represents>represents</a> a one line plain text edit control for
  the element's <a href=form-control-infrastructure.html#concept-fe-value id="password-state-(type=password):concept-fe-value">value</a>. The user agent should obscure the value
  so that people other than the user cannot see it.</p>

  

  <p>If the element is <i id="password-state-(type=password):concept-fe-mutable"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, its <a href=form-control-infrastructure.html#concept-fe-value id="password-state-(type=password):concept-fe-value-2">value</a> should be editable by the user. User agents must not allow
  users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the <a href=form-control-infrastructure.html#concept-fe-value id="password-state-(type=password):concept-fe-value-3">value</a>.</p>

  

  <p>The <code id="password-state-(type=password):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified, must have a value that
  contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.</p>

  

  <p><strong>The <a href=#value-sanitization-algorithm id="password-state-(type=password):value-sanitization-algorithm">value sanitization algorithm</a> is as follows</strong>: <a id="password-state-(type=password):strip-newlines" href=https://infra.spec.whatwg.org/#strip-newlines data-x-internal=strip-newlines>Strip
  newlines</a> from the <a href=form-control-infrastructure.html#concept-fe-value id="password-state-(type=password):concept-fe-value-4">value</a>.</p>

  

  <div class=bookkeeping>

   <p>The following common <code id="password-state-(type=password):the-input-element-3"><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods <a href=#concept-input-apply id="password-state-(type=password):concept-input-apply">apply</a> to the element:
   <code id="password-state-(type=password):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="password-state-(type=password):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="password-state-(type=password):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="password-state-(type=password):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="password-state-(type=password):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="password-state-(type=password):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="password-state-(type=password):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="password-state-(type=password):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="password-state-(type=password):attr-input-size"><a href=#attr-input-size>size</a></code> content attributes;
   <code id="password-state-(type=password):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="password-state-(type=password):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="password-state-(type=password):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, and
   <code id="password-state-(type=password):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attributes;
   <code id="password-state-(type=password):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="password-state-(type=password):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="password-state-(type=password):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

   <p>The <code id="password-state-(type=password):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value id="password-state-(type=password):dom-input-value-value">value</a>.</p>

   <p>The <code id="password-state-(type=password):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="password-state-(type=password):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="password-state-(type=password):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="password-state-(type=password):do-not-apply">do not
   apply</a> to the element:
   <code id="password-state-(type=password):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="password-state-(type=password):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="password-state-(type=password):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="password-state-(type=password):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="password-state-(type=password):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="password-state-(type=password):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="password-state-(type=password):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="password-state-(type=password):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="password-state-(type=password):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="password-state-(type=password):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="password-state-(type=password):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="password-state-(type=password):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="password-state-(type=password):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="password-state-(type=password):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="password-state-(type=password):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="password-state-(type=password):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="password-state-(type=password):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="password-state-(type=password):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="password-state-(type=password):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="password-state-(type=password):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="password-state-(type=password):do-not-apply-2">do not apply</a> to the
   element:
   <code id="password-state-(type=password):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="password-state-(type=password):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="password-state-(type=password):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="password-state-(type=password):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="password-state-(type=password):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="password-state-(type=password):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code id="password-state-(type=password):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>


  <h6 id="date-state-(type=date)"><span class=secno>4.10.5.1.7</span> <dfn data-dfn-for=input data-dfn-type=element-state>Date</dfn> state (<code>type=date</code>)<a href="#date-state-(type=date)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date title="<input> elements of type=&quot;date&quot; create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.">Element/input/date</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>57+</span></span><span class="safari yes"><span>Safari</span><span>14.1+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  

  <p>When an <code id="date-state-(type=date):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="date-state-(type=date):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#date-state-(type=date)" id="date-state-(type=date):date-state-(type=date)">Date</a> state, the rules in this section apply.</p>

  

  <p>The <code id="date-state-(type=date):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="date-state-(type=date):represents" href=dom.html#represents>represents</a> a control for setting the element's
  <a href=form-control-infrastructure.html#concept-fe-value id="date-state-(type=date):concept-fe-value">value</a> to a string representing a specific <a href=common-microsyntaxes.html#concept-date id="date-state-(type=date):concept-date">date</a>.</p>

  

  <p>If the element is <i id="date-state-(type=date):concept-fe-mutable"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, the user agent should allow the
  user to change the <a href=common-microsyntaxes.html#concept-date id="date-state-(type=date):concept-date-2">date</a> represented by its <a href=form-control-infrastructure.html#concept-fe-value id="date-state-(type=date):concept-fe-value-2">value</a>, as obtained by <a href=common-microsyntaxes.html#parse-a-date-string id="date-state-(type=date):parse-a-date-string">parsing a
  date</a> from it. User agents must not allow the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="date-state-(type=date):concept-fe-value-3">value</a> to a non-empty string that is not a <a id="date-state-(type=date):valid-date-string" href=common-microsyntaxes.html#valid-date-string>valid date
  string</a>. If the user agent provides a user interface for selecting a <a href=common-microsyntaxes.html#concept-date id="date-state-(type=date):concept-date-3">date</a>, then the <a href=form-control-infrastructure.html#concept-fe-value id="date-state-(type=date):concept-fe-value-4">value</a> must be set
  to a <a id="date-state-(type=date):valid-date-string-2" href=common-microsyntaxes.html#valid-date-string>valid date string</a> representing the user's selection. User agents should allow
  the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="date-state-(type=date):concept-fe-value-5">value</a> to the empty string.</p>

  <p><strong>Constraint validation</strong>: While the user interface describes input that the user
  agent cannot convert to a <a id="date-state-(type=date):valid-date-string-3" href=common-microsyntaxes.html#valid-date-string>valid date string</a>, the control is <a id="date-state-(type=date):suffering-from-bad-input" href=form-control-infrastructure.html#suffering-from-bad-input>suffering from bad
  input</a>.</p>

  

  <p class=note>See the <a href=forms.html#input-author-notes>introduction section</a> for a discussion of
  the difference between the input format and submission format for date, time, and number form
  controls, and the <a href=#input-impl-notes>implementation notes</a>
  regarding localization of form controls.</p>

  <p>The <code id="date-state-(type=date):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not empty, must
  have a value that is a <a id="date-state-(type=date):valid-date-string-4" href=common-microsyntaxes.html#valid-date-string>valid date string</a>.</p> 

  

  <p><strong>The <a href=#value-sanitization-algorithm id="date-state-(type=date):value-sanitization-algorithm">value sanitization algorithm</a> is as follows</strong>: If the <a href=form-control-infrastructure.html#concept-fe-value id="date-state-(type=date):concept-fe-value-6">value</a> of the element is not a <a id="date-state-(type=date):valid-date-string-5" href=common-microsyntaxes.html#valid-date-string>valid date string</a>, then
  set it to the empty string instead.</p>

  

  <p>The <code id="date-state-(type=date):attr-input-min"><a href=#attr-input-min>min</a></code> attribute, if specified, must have a value that is
  a <a id="date-state-(type=date):valid-date-string-6" href=common-microsyntaxes.html#valid-date-string>valid date string</a>. The <code id="date-state-(type=date):attr-input-max"><a href=#attr-input-max>max</a></code> attribute, if
  specified, must have a value that is a <a id="date-state-(type=date):valid-date-string-7" href=common-microsyntaxes.html#valid-date-string>valid date string</a>.</p>

  <p>The <code id="date-state-(type=date):attr-input-step"><a href=#attr-input-step>step</a></code> attribute is expressed in days. The <a href=#concept-input-step-scale id="date-state-(type=date):concept-input-step-scale">step scale factor</a> is 86,400,000
  (which converts the days to milliseconds, as used in the other algorithms). The <a href=#concept-input-step-default id="date-state-(type=date):concept-input-step-default">default step</a> is 1 day.</p>

  

  <p>When the element is <a id="date-state-(type=date):suffering-from-a-step-mismatch" href=form-control-infrastructure.html#suffering-from-a-step-mismatch>suffering from a step mismatch</a>, the user agent may round the
  element's <a href=form-control-infrastructure.html#concept-fe-value id="date-state-(type=date):concept-fe-value-7">value</a> to the nearest <a href=common-microsyntaxes.html#concept-date id="date-state-(type=date):concept-date-4">date</a> for which the element would not <a href=form-control-infrastructure.html#suffering-from-a-step-mismatch id="date-state-(type=date):suffering-from-a-step-mismatch-2">suffer from a step mismatch</a>.</p>

  <p><strong>The <a href=#concept-input-value-string-number id="date-state-(type=date):concept-input-value-string-number">algorithm to convert a string to a
  number</a>, given a string <var>input</var>, is as follows</strong>: If <a href=common-microsyntaxes.html#parse-a-date-string id="date-state-(type=date):parse-a-date-string-2">parsing a date</a> from <var>input</var> results in an
  error, then return an error; otherwise, return the number of milliseconds elapsed from midnight
  UTC on the morning of 1970-01-01 (the time represented by the value "<code>1970-01-01T00:00:00.0Z</code>") to midnight UTC on the morning of the parsed <a href=common-microsyntaxes.html#concept-date id="date-state-(type=date):concept-date-5">date</a>, ignoring leap seconds.</p>

  <p><strong>The <a href=#concept-input-value-number-string id="date-state-(type=date):concept-input-value-number-string">algorithm to convert a number to a
  string</a>, given a number <var>input</var>, is as follows</strong>: Return a
  <a id="date-state-(type=date):valid-date-string-8" href=common-microsyntaxes.html#valid-date-string>valid date string</a> that represents the <a href=common-microsyntaxes.html#concept-date id="date-state-(type=date):concept-date-6">date</a> that, in
  UTC, is current <var>input</var> milliseconds after midnight UTC on the morning of
  1970-01-01 (the time represented by the value "<code>1970-01-01T00:00:00.0Z</code>").</p>

  <p><strong>The <a href=#concept-input-value-string-date id="date-state-(type=date):concept-input-value-string-date">algorithm to convert a string to a
  <code>Date</code> object</a>, given a string <var>input</var>, is as follows</strong>:
  If <a href=common-microsyntaxes.html#parse-a-date-string id="date-state-(type=date):parse-a-date-string-3">parsing a date</a> from <var>input</var> results
  in an error, then return an error; otherwise, return <a href=infrastructure.html#create-a-date-object id="date-state-(type=date):create-a-date-object">a new
  <code>Date</code> object</a> representing midnight UTC on the morning of the parsed <a href=common-microsyntaxes.html#concept-date id="date-state-(type=date):concept-date-7">date</a>.</p>

  <p><strong>The <a href=#concept-input-value-date-string id="date-state-(type=date):concept-input-value-date-string">algorithm to convert a
  <code>Date</code> object to a string</a>, given a <code id="date-state-(type=date):date"><a data-x-internal=date href=https://tc39.es/ecma262/#sec-date-objects>Date</a></code> object <var>input</var>, is
  as follows</strong>: Return a <a id="date-state-(type=date):valid-date-string-9" href=common-microsyntaxes.html#valid-date-string>valid date string</a> that represents the <a href=common-microsyntaxes.html#concept-date id="date-state-(type=date):concept-date-8">date</a> current at the time represented by <var>input</var> in the UTC
  time zone.</p>

  

  <div id=only-contemporary-times class=note><a href=#only-contemporary-times class=self-link></a>

   <p>The <a href="#date-state-(type=date)" id="date-state-(type=date):date-state-(type=date)-2">Date</a> state (and other date- and time-related
   states described in subsequent sections) is not intended for the entry of values for which a
   precise date and time relative to the contemporary calendar cannot be established. For example,
   it would be inappropriate for the entry of times like "one millisecond after the big bang", "the
   early part of the Jurassic period", or "a winter around 250 BCE".</p>

   <p>For the input of dates before the introduction of the Gregorian calendar, authors are
   encouraged to not use the <a href="#date-state-(type=date)" id="date-state-(type=date):date-state-(type=date)-3">Date</a> state (and the other
   date- and time-related states described in subsequent sections), as user agents are not required
   to support converting dates and times from earlier periods to the Gregorian calendar, and asking
   users to do so manually puts an undue burden on users. (This is complicated by the manner in
   which the Gregorian calendar was phased in, which occurred at different times in different
   countries, ranging from partway through the 16th century all the way to early in the 20th.)
   Instead, authors are encouraged to provide fine-grained input controls using the
   <code id="date-state-(type=date):the-select-element"><a href=form-elements.html#the-select-element>select</a></code> element and <code id="date-state-(type=date):the-input-element-3"><a href=#the-input-element>input</a></code> elements with the <a href="#number-state-(type=number)" id="date-state-(type=date):number-state-(type=number)">Number</a> state.</p>

  </div>

  <div class=bookkeeping>

   <p>The following common <code id="date-state-(type=date):the-input-element-4"><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods <a href=#concept-input-apply id="date-state-(type=date):concept-input-apply">apply</a> to the element:
   <code id="date-state-(type=date):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="date-state-(type=date):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="date-state-(type=date):attr-input-max-2"><a href=#attr-input-max>max</a></code>,
   <code id="date-state-(type=date):attr-input-min-2"><a href=#attr-input-min>min</a></code>,
   <code id="date-state-(type=date):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="date-state-(type=date):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="date-state-(type=date):attr-input-step-2"><a href=#attr-input-step>step</a></code> content attributes;
   <code id="date-state-(type=date):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="date-state-(type=date):dom-input-value"><a href=#dom-input-value>value</a></code>,
   <code id="date-state-(type=date):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="date-state-(type=date):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="date-state-(type=date):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="date-state-(type=date):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="date-state-(type=date):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="date-state-(type=date):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value id="date-state-(type=date):dom-input-value-value">value</a>.</p>

   <p>The <code id="date-state-(type=date):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="date-state-(type=date):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="date-state-(type=date):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="date-state-(type=date):do-not-apply">do not
   apply</a> to the element:
   <code id="date-state-(type=date):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="date-state-(type=date):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="date-state-(type=date):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="date-state-(type=date):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="date-state-(type=date):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="date-state-(type=date):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="date-state-(type=date):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="date-state-(type=date):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="date-state-(type=date):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="date-state-(type=date):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="date-state-(type=date):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="date-state-(type=date):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="date-state-(type=date):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="date-state-(type=date):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="date-state-(type=date):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="date-state-(type=date):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="date-state-(type=date):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="date-state-(type=date):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="date-state-(type=date):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="date-state-(type=date):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="date-state-(type=date):attr-input-src"><a href=#attr-input-src>src</a></code>, and
   <code id="date-state-(type=date):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="date-state-(type=date):do-not-apply-2">do not apply</a> to the
   element:
   <code id="date-state-(type=date):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="date-state-(type=date):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="date-state-(type=date):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code id="date-state-(type=date):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code> IDL attributes;
   <code id="date-state-(type=date):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="date-state-(type=date):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>


  <h6 id="month-state-(type=month)"><span class=secno>4.10.5.1.8</span> <dfn data-dfn-for=input data-dfn-type=element-state>Month</dfn> state (<code>type=month</code>)<a href="#month-state-(type=month)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month title="<input> elements of type month create input fields that let the user enter a month and year allowing a month and year to be easily entered. The value is a string whose value is in the format &quot;YYYY-MM&quot;, where YYYY is the four-digit year and MM is the month number.">Element/input/month</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>18+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>Yes</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>When an <code id="month-state-(type=month):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="month-state-(type=month):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#month-state-(type=month)" id="month-state-(type=month):month-state-(type=month)">Month</a> state, the rules in this section apply.</p>

  

  <p>The <code id="month-state-(type=month):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="month-state-(type=month):represents" href=dom.html#represents>represents</a> a control for setting the element's
  <a href=form-control-infrastructure.html#concept-fe-value id="month-state-(type=month):concept-fe-value">value</a> to a string representing a specific <a href=common-microsyntaxes.html#concept-month id="month-state-(type=month):concept-month">month</a>.</p>

  

  <p>If the element is <i id="month-state-(type=month):concept-fe-mutable"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, the user agent should allow the
  user to change the <a href=common-microsyntaxes.html#concept-month id="month-state-(type=month):concept-month-2">month</a> represented by its <a href=form-control-infrastructure.html#concept-fe-value id="month-state-(type=month):concept-fe-value-2">value</a>, as obtained by <a href=common-microsyntaxes.html#parse-a-month-string id="month-state-(type=month):parse-a-month-string">parsing a
  month</a> from it. User agents must not allow the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="month-state-(type=month):concept-fe-value-3">value</a> to a non-empty string that is not a <a id="month-state-(type=month):valid-month-string" href=common-microsyntaxes.html#valid-month-string>valid month
  string</a>. If the user agent provides a user interface for selecting a <a href=common-microsyntaxes.html#concept-month id="month-state-(type=month):concept-month-3">month</a>, then the <a href=form-control-infrastructure.html#concept-fe-value id="month-state-(type=month):concept-fe-value-4">value</a> must be
  set to a <a id="month-state-(type=month):valid-month-string-2" href=common-microsyntaxes.html#valid-month-string>valid month string</a> representing the user's selection. User agents should
  allow the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="month-state-(type=month):concept-fe-value-5">value</a> to the empty string.</p>

  <p><strong>Constraint validation</strong>: While the user interface describes input that the user
  agent cannot convert to a <a id="month-state-(type=month):valid-month-string-3" href=common-microsyntaxes.html#valid-month-string>valid month string</a>, the control is <a id="month-state-(type=month):suffering-from-bad-input" href=form-control-infrastructure.html#suffering-from-bad-input>suffering from bad
  input</a>.</p>

  

  <p class=note>See the <a href=forms.html#input-author-notes>introduction section</a> for a discussion of
  the difference between the input format and submission format for date, time, and number form
  controls, and the <a href=#input-impl-notes>implementation notes</a>
  regarding localization of form controls.</p>

  <p>The <code id="month-state-(type=month):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not empty, must
  have a value that is a <a id="month-state-(type=month):valid-month-string-4" href=common-microsyntaxes.html#valid-month-string>valid month string</a>.</p> 

  

  <p><strong>The <a href=#value-sanitization-algorithm id="month-state-(type=month):value-sanitization-algorithm">value sanitization algorithm</a> is as follows</strong>: If the <a href=form-control-infrastructure.html#concept-fe-value id="month-state-(type=month):concept-fe-value-6">value</a> of the element is not a <a id="month-state-(type=month):valid-month-string-5" href=common-microsyntaxes.html#valid-month-string>valid month string</a>,
  then set it to the empty string instead.</p>

  

  <p>The <code id="month-state-(type=month):attr-input-min"><a href=#attr-input-min>min</a></code> attribute, if specified, must have a value that is
  a <a id="month-state-(type=month):valid-month-string-6" href=common-microsyntaxes.html#valid-month-string>valid month string</a>. The <code id="month-state-(type=month):attr-input-max"><a href=#attr-input-max>max</a></code> attribute, if
  specified, must have a value that is a <a id="month-state-(type=month):valid-month-string-7" href=common-microsyntaxes.html#valid-month-string>valid month string</a>.</p>

  <p>The <code id="month-state-(type=month):attr-input-step"><a href=#attr-input-step>step</a></code> attribute is expressed in months. The <a href=#concept-input-step-scale id="month-state-(type=month):concept-input-step-scale">step scale factor</a> is 1 (there is no
  conversion needed as the algorithms use months). The <a href=#concept-input-step-default id="month-state-(type=month):concept-input-step-default">default step</a> is 1 month.</p>

  

  <p>When the element is <a id="month-state-(type=month):suffering-from-a-step-mismatch" href=form-control-infrastructure.html#suffering-from-a-step-mismatch>suffering from a step mismatch</a>, the user agent may round the
  element's <a href=form-control-infrastructure.html#concept-fe-value id="month-state-(type=month):concept-fe-value-7">value</a> to the nearest <a href=common-microsyntaxes.html#concept-month id="month-state-(type=month):concept-month-4">month</a> for which the element would not <a href=form-control-infrastructure.html#suffering-from-a-step-mismatch id="month-state-(type=month):suffering-from-a-step-mismatch-2">suffer from a step mismatch</a>.</p>

  <p><strong>The <a href=#concept-input-value-string-number id="month-state-(type=month):concept-input-value-string-number">algorithm to convert a string to a
  number</a>, given a string <var>input</var>, is as follows</strong>: If <a href=common-microsyntaxes.html#parse-a-month-string id="month-state-(type=month):parse-a-month-string-2">parsing a month</a> from <var>input</var> results in an
  error, then return an error; otherwise, return the number of months between January 1970 and the
  parsed <a href=common-microsyntaxes.html#concept-month id="month-state-(type=month):concept-month-5">month</a>.</p>

  <p><strong>The <a href=#concept-input-value-number-string id="month-state-(type=month):concept-input-value-number-string">algorithm to convert a number to a
  string</a>, given a number <var>input</var>, is as follows</strong>: Return a
  <a id="month-state-(type=month):valid-month-string-8" href=common-microsyntaxes.html#valid-month-string>valid month string</a> that represents the <a href=common-microsyntaxes.html#concept-month id="month-state-(type=month):concept-month-6">month</a> that
  has <var>input</var> months between it and January 1970.</p>

  

  <p><strong>The <a href=#concept-input-value-string-date id="month-state-(type=month):concept-input-value-string-date">algorithm to convert a string to a
  <code>Date</code> object</a>, given a string <var>input</var>, is as follows</strong>:
  If <a href=common-microsyntaxes.html#parse-a-month-string id="month-state-(type=month):parse-a-month-string-3">parsing a month</a> from <var>input</var>
  results in an error, then return an error; otherwise, return <a href=infrastructure.html#create-a-date-object id="month-state-(type=month):create-a-date-object">a
  new <code>Date</code> object</a> representing midnight UTC on the morning of the first day of
  the parsed <a href=common-microsyntaxes.html#concept-month id="month-state-(type=month):concept-month-7">month</a>.</p>

  <p><strong>The <a href=#concept-input-value-date-string id="month-state-(type=month):concept-input-value-date-string">algorithm to convert a
  <code>Date</code> object to a string</a>, given a <code id="month-state-(type=month):date"><a data-x-internal=date href=https://tc39.es/ecma262/#sec-date-objects>Date</a></code> object <var>input</var>, is
  as follows</strong>: Return a <a id="month-state-(type=month):valid-month-string-9" href=common-microsyntaxes.html#valid-month-string>valid month string</a> that represents the <a href=common-microsyntaxes.html#concept-month id="month-state-(type=month):concept-month-8">month</a> current at the time represented by <var>input</var> in the UTC
  time zone.</p>

  

  <div class=bookkeeping>

   <p>The following common <code id="month-state-(type=month):the-input-element-3"><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods <a href=#concept-input-apply id="month-state-(type=month):concept-input-apply">apply</a> to the element:
   <code id="month-state-(type=month):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="month-state-(type=month):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="month-state-(type=month):attr-input-max-2"><a href=#attr-input-max>max</a></code>,
   <code id="month-state-(type=month):attr-input-min-2"><a href=#attr-input-min>min</a></code>,
   <code id="month-state-(type=month):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="month-state-(type=month):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="month-state-(type=month):attr-input-step-2"><a href=#attr-input-step>step</a></code> content attributes;
   <code id="month-state-(type=month):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="month-state-(type=month):dom-input-value"><a href=#dom-input-value>value</a></code>,
   <code id="month-state-(type=month):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="month-state-(type=month):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="month-state-(type=month):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="month-state-(type=month):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="month-state-(type=month):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="month-state-(type=month):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value id="month-state-(type=month):dom-input-value-value">value</a>.</p>

   <p>The <code id="month-state-(type=month):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="month-state-(type=month):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="month-state-(type=month):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="month-state-(type=month):do-not-apply">do not
   apply</a> to the element:
   <code id="month-state-(type=month):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="month-state-(type=month):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="month-state-(type=month):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="month-state-(type=month):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="month-state-(type=month):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="month-state-(type=month):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="month-state-(type=month):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="month-state-(type=month):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="month-state-(type=month):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="month-state-(type=month):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="month-state-(type=month):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="month-state-(type=month):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="month-state-(type=month):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="month-state-(type=month):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="month-state-(type=month):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="month-state-(type=month):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="month-state-(type=month):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="month-state-(type=month):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="month-state-(type=month):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="month-state-(type=month):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="month-state-(type=month):attr-input-src"><a href=#attr-input-src>src</a></code>, and
   <code id="month-state-(type=month):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="month-state-(type=month):do-not-apply-2">do not apply</a> to the
   element:
   <code id="month-state-(type=month):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="month-state-(type=month):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="month-state-(type=month):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="month-state-(type=month):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code id="month-state-(type=month):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code> IDL attributes;
   <code id="month-state-(type=month):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="month-state-(type=month):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>


  <h6 id="week-state-(type=week)"><span class=secno>4.10.5.1.9</span> <dfn data-dfn-for=input data-dfn-type=element-state>Week</dfn> state (<code>type=week</code>)<a href="#week-state-(type=week)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week title="<input> elements of type week create input fields allowing easy entry of a year plus the ISO 8601 week number during that year (i.e., week 1 to 52 or 53).">Element/input/week</a><div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>18+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>When an <code id="week-state-(type=week):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="week-state-(type=week):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#week-state-(type=week)" id="week-state-(type=week):week-state-(type=week)">Week</a> state, the rules in this section apply.</p>

  

  <p>The <code id="week-state-(type=week):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="week-state-(type=week):represents" href=dom.html#represents>represents</a> a control for setting the element's
  <a href=form-control-infrastructure.html#concept-fe-value id="week-state-(type=week):concept-fe-value">value</a> to a string representing a specific <a href=common-microsyntaxes.html#concept-week id="week-state-(type=week):concept-week">week</a>.</p>

  

  <p>If the element is <i id="week-state-(type=week):concept-fe-mutable"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, the user agent should allow the
  user to change the <a href=common-microsyntaxes.html#concept-week id="week-state-(type=week):concept-week-2">week</a> represented by its <a href=form-control-infrastructure.html#concept-fe-value id="week-state-(type=week):concept-fe-value-2">value</a>, as obtained by <a href=common-microsyntaxes.html#parse-a-week-string id="week-state-(type=week):parse-a-week-string">parsing a
  week</a> from it. User agents must not allow the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="week-state-(type=week):concept-fe-value-3">value</a> to a non-empty string that is not a <a id="week-state-(type=week):valid-week-string" href=common-microsyntaxes.html#valid-week-string>valid week
  string</a>. If the user agent provides a user interface for selecting a <a href=common-microsyntaxes.html#concept-week id="week-state-(type=week):concept-week-3">week</a>, then the <a href=form-control-infrastructure.html#concept-fe-value id="week-state-(type=week):concept-fe-value-4">value</a> must be set
  to a <a id="week-state-(type=week):valid-week-string-2" href=common-microsyntaxes.html#valid-week-string>valid week string</a> representing the user's selection. User agents should allow
  the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="week-state-(type=week):concept-fe-value-5">value</a> to the empty string.</p>

  <p><strong>Constraint validation</strong>: While the user interface describes input that the user
  agent cannot convert to a <a id="week-state-(type=week):valid-week-string-3" href=common-microsyntaxes.html#valid-week-string>valid week string</a>, the control is <a id="week-state-(type=week):suffering-from-bad-input" href=form-control-infrastructure.html#suffering-from-bad-input>suffering from bad
  input</a>.</p>

  

  <p class=note>See the <a href=forms.html#input-author-notes>introduction section</a> for a discussion of
  the difference between the input format and submission format for date, time, and number form
  controls, and the <a href=#input-impl-notes>implementation notes</a>
  regarding localization of form controls.</p>

  <p>The <code id="week-state-(type=week):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not empty, must
  have a value that is a <a id="week-state-(type=week):valid-week-string-4" href=common-microsyntaxes.html#valid-week-string>valid week string</a>.</p> 

  

  <p><strong>The <a href=#value-sanitization-algorithm id="week-state-(type=week):value-sanitization-algorithm">value sanitization algorithm</a> is as follows</strong>: If the <a href=form-control-infrastructure.html#concept-fe-value id="week-state-(type=week):concept-fe-value-6">value</a> of the element is not a <a id="week-state-(type=week):valid-week-string-5" href=common-microsyntaxes.html#valid-week-string>valid week string</a>, then
  set it to the empty string instead.</p>

  

  <p>The <code id="week-state-(type=week):attr-input-min"><a href=#attr-input-min>min</a></code> attribute, if specified, must have a value that is
  a <a id="week-state-(type=week):valid-week-string-6" href=common-microsyntaxes.html#valid-week-string>valid week string</a>. The <code id="week-state-(type=week):attr-input-max"><a href=#attr-input-max>max</a></code> attribute, if
  specified, must have a value that is a <a id="week-state-(type=week):valid-week-string-7" href=common-microsyntaxes.html#valid-week-string>valid week string</a>.</p>

  <p>The <code id="week-state-(type=week):attr-input-step"><a href=#attr-input-step>step</a></code> attribute is expressed in weeks. The <a href=#concept-input-step-scale id="week-state-(type=week):concept-input-step-scale">step scale factor</a> is 604,800,000
  (which converts the weeks to milliseconds, as used in the other algorithms). The <a href=#concept-input-step-default id="week-state-(type=week):concept-input-step-default">default step</a> is 1 week. The <a href=#concept-input-step-default-base id="week-state-(type=week):concept-input-step-default-base">default step base</a> is −259,200,000 (the start
  of week 1970-W01).</p>

  

  <p>When the element is <a id="week-state-(type=week):suffering-from-a-step-mismatch" href=form-control-infrastructure.html#suffering-from-a-step-mismatch>suffering from a step mismatch</a>, the user agent may round the
  element's <a href=form-control-infrastructure.html#concept-fe-value id="week-state-(type=week):concept-fe-value-7">value</a> to the nearest <a href=common-microsyntaxes.html#concept-week id="week-state-(type=week):concept-week-4">week</a> for which the element would not <a href=form-control-infrastructure.html#suffering-from-a-step-mismatch id="week-state-(type=week):suffering-from-a-step-mismatch-2">suffer from a step mismatch</a>.</p>

  <p><strong>The <a href=#concept-input-value-string-number id="week-state-(type=week):concept-input-value-string-number">algorithm to convert a string to a
  number</a>, given a string <var>input</var>, is as follows</strong>: If <a href=common-microsyntaxes.html#parse-a-week-string id="week-state-(type=week):parse-a-week-string-2">parsing a week string</a> from <var>input</var> results in
  an error, then return an error; otherwise, return the number of milliseconds elapsed from midnight
  UTC on the morning of 1970-01-01 (the time represented by the value "<code>1970-01-01T00:00:00.0Z</code>") to midnight UTC on the morning of the Monday of the
  parsed <a href=common-microsyntaxes.html#concept-week id="week-state-(type=week):concept-week-5">week</a>, ignoring leap seconds.</p>

  <p><strong>The <a href=#concept-input-value-number-string id="week-state-(type=week):concept-input-value-number-string">algorithm to convert a number to a
  string</a>, given a number <var>input</var>, is as follows</strong>: Return a
  <a id="week-state-(type=week):valid-week-string-8" href=common-microsyntaxes.html#valid-week-string>valid week string</a> that represents the <a href=common-microsyntaxes.html#concept-week id="week-state-(type=week):concept-week-6">week</a> that, in
  UTC, is current <var>input</var> milliseconds after midnight UTC on the morning of
  1970-01-01 (the time represented by the value "<code>1970-01-01T00:00:00.0Z</code>").</p>

  <p><strong>The <a href=#concept-input-value-string-date id="week-state-(type=week):concept-input-value-string-date">algorithm to convert a string to a
  <code>Date</code> object</a>, given a string <var>input</var>, is as follows</strong>: If <a href=common-microsyntaxes.html#parse-a-week-string id="week-state-(type=week):parse-a-week-string-3">parsing a week</a> from <var>input</var> results in an error, then
  return an error; otherwise, return <a href=infrastructure.html#create-a-date-object id="week-state-(type=week):create-a-date-object">a new <code>Date</code>
  object</a> representing midnight UTC on the morning of the Monday of the parsed <a href=common-microsyntaxes.html#concept-week id="week-state-(type=week):concept-week-7">week</a>.</p>

  <p><strong>The <a href=#concept-input-value-date-string id="week-state-(type=week):concept-input-value-date-string">algorithm to convert a
  <code>Date</code> object to a string</a>, given a <code id="week-state-(type=week):date"><a data-x-internal=date href=https://tc39.es/ecma262/#sec-date-objects>Date</a></code> object <var>input</var>, is
  as follows</strong>: Return a <a id="week-state-(type=week):valid-week-string-9" href=common-microsyntaxes.html#valid-week-string>valid week string</a> that represents the <a href=common-microsyntaxes.html#concept-week id="week-state-(type=week):concept-week-8">week</a> current at the time represented by <var>input</var> in the UTC
  time zone.</p>

  

  <div class=bookkeeping>

   <p>The following common <code id="week-state-(type=week):the-input-element-3"><a href=#the-input-element>input</a></code> element content attributes, IDL attributes, and
   methods <a href=#concept-input-apply id="week-state-(type=week):concept-input-apply">apply</a> to the element:
   <code id="week-state-(type=week):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="week-state-(type=week):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="week-state-(type=week):attr-input-max-2"><a href=#attr-input-max>max</a></code>,
   <code id="week-state-(type=week):attr-input-min-2"><a href=#attr-input-min>min</a></code>,
   <code id="week-state-(type=week):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="week-state-(type=week):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="week-state-(type=week):attr-input-step-2"><a href=#attr-input-step>step</a></code> content attributes;
   <code id="week-state-(type=week):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="week-state-(type=week):dom-input-value"><a href=#dom-input-value>value</a></code>,
   <code id="week-state-(type=week):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="week-state-(type=week):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="week-state-(type=week):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="week-state-(type=week):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="week-state-(type=week):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="week-state-(type=week):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <a href=#dom-input-value-value id="week-state-(type=week):dom-input-value-value">value</a>.</p>

   <p>The <code id="week-state-(type=week):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="week-state-(type=week):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="week-state-(type=week):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="week-state-(type=week):do-not-apply">do not apply</a> to the
   element:
   <code id="week-state-(type=week):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="week-state-(type=week):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="week-state-(type=week):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="week-state-(type=week):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="week-state-(type=week):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="week-state-(type=week):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="week-state-(type=week):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="week-state-(type=week):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="week-state-(type=week):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="week-state-(type=week):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="week-state-(type=week):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="week-state-(type=week):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="week-state-(type=week):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="week-state-(type=week):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="week-state-(type=week):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="week-state-(type=week):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="week-state-(type=week):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="week-state-(type=week):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="week-state-(type=week):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="week-state-(type=week):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="week-state-(type=week):attr-input-src"><a href=#attr-input-src>src</a></code>, and
   <code id="week-state-(type=week):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="week-state-(type=week):do-not-apply-2">do not apply</a> to the element:
   <code id="week-state-(type=week):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="week-state-(type=week):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="week-state-(type=week):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="week-state-(type=week):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code id="week-state-(type=week):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code> IDL attributes;
   <code id="week-state-(type=week):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="week-state-(type=week):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>


  <h6 id="time-state-(type=time)"><span class=secno>4.10.5.1.10</span> <dfn data-dfn-for=input data-dfn-type=element-state>Time</dfn> state (<code>type=time</code>)<a href="#time-state-(type=time)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time title="<input> elements of type time create input fields designed to let the user easily enter a time (hours and minutes, and optionally seconds).">Element/input/time</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>57+</span></span><span class="safari yes"><span>Safari</span><span>14.1+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>10+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div>

  

  <p>When an <code id="time-state-(type=time):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="time-state-(type=time):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#time-state-(type=time)" id="time-state-(type=time):time-state-(type=time)">Time</a> state, the rules in this section apply.</p>

  

  <p>The <code id="time-state-(type=time):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="time-state-(type=time):represents" href=dom.html#represents>represents</a> a control for setting the element's
  <a href=form-control-infrastructure.html#concept-fe-value id="time-state-(type=time):concept-fe-value">value</a> to a string representing a specific <a href=common-microsyntaxes.html#concept-time id="time-state-(type=time):concept-time">time</a>.</p>

  

  <p>If the element is <i id="time-state-(type=time):concept-fe-mutable"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, the user agent should allow the
  user to change the <a href=common-microsyntaxes.html#concept-time id="time-state-(type=time):concept-time-2">time</a> represented by its <a href=form-control-infrastructure.html#concept-fe-value id="time-state-(type=time):concept-fe-value-2">value</a>, as obtained by <a href=common-microsyntaxes.html#parse-a-time-string id="time-state-(type=time):parse-a-time-string">parsing a
  time</a> from it. User agents must not allow the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="time-state-(type=time):concept-fe-value-3">value</a> to a non-empty string that is not a <a id="time-state-(type=time):valid-time-string" href=common-microsyntaxes.html#valid-time-string>valid time
  string</a>. If the user agent provides a user interface for selecting a <a href=common-microsyntaxes.html#concept-time id="time-state-(type=time):concept-time-3">time</a>, then the <a href=form-control-infrastructure.html#concept-fe-value id="time-state-(type=time):concept-fe-value-4">value</a> must be set
  to a <a id="time-state-(type=time):valid-time-string-2" href=common-microsyntaxes.html#valid-time-string>valid time string</a> representing the user's selection. User agents should allow
  the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="time-state-(type=time):concept-fe-value-5">value</a> to the empty string.</p>

  <p><strong>Constraint validation</strong>: While the user interface describes input that the user
  agent cannot convert to a <a id="time-state-(type=time):valid-time-string-3" href=common-microsyntaxes.html#valid-time-string>valid time string</a>, the control is <a id="time-state-(type=time):suffering-from-bad-input" href=form-control-infrastructure.html#suffering-from-bad-input>suffering from bad
  input</a>.</p>

  

  <p class=note>See the <a href=forms.html#input-author-notes>introduction section</a> for a discussion of
  the difference between the input format and submission format for date, time, and number form
  controls, and the <a href=#input-impl-notes>implementation notes</a>
  regarding localization of form controls.</p>

  <p>The <code id="time-state-(type=time):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not empty, must
  have a value that is a <a id="time-state-(type=time):valid-time-string-4" href=common-microsyntaxes.html#valid-time-string>valid time string</a>.</p> 

  

  <p><strong>The <a href=#value-sanitization-algorithm id="time-state-(type=time):value-sanitization-algorithm">value sanitization algorithm</a> is as follows</strong>: If the <a href=form-control-infrastructure.html#concept-fe-value id="time-state-(type=time):concept-fe-value-6">value</a> of the element is not a <a id="time-state-(type=time):valid-time-string-5" href=common-microsyntaxes.html#valid-time-string>valid time string</a>, then
  set it to the empty string instead.</p>

  <p>The form control <a href=#has-a-periodic-domain id="time-state-(type=time):has-a-periodic-domain">has a periodic domain</a>.</p>

  

  <p>The <code id="time-state-(type=time):attr-input-min"><a href=#attr-input-min>min</a></code> attribute, if specified, must have a value that is
  a <a id="time-state-(type=time):valid-time-string-6" href=common-microsyntaxes.html#valid-time-string>valid time string</a>. The <code id="time-state-(type=time):attr-input-max"><a href=#attr-input-max>max</a></code> attribute, if
  specified, must have a value that is a <a id="time-state-(type=time):valid-time-string-7" href=common-microsyntaxes.html#valid-time-string>valid time string</a>.</p>

  <p>The <code id="time-state-(type=time):attr-input-step"><a href=#attr-input-step>step</a></code> attribute is expressed in seconds. The <a href=#concept-input-step-scale id="time-state-(type=time):concept-input-step-scale">step scale factor</a> is 1000 (which
  converts the seconds to milliseconds, as used in the other algorithms). The <a href=#concept-input-step-default id="time-state-(type=time):concept-input-step-default">default step</a> is 60 seconds.</p>

  

  <p>When the element is <a id="time-state-(type=time):suffering-from-a-step-mismatch" href=form-control-infrastructure.html#suffering-from-a-step-mismatch>suffering from a step mismatch</a>, the user agent may round the
  element's <a href=form-control-infrastructure.html#concept-fe-value id="time-state-(type=time):concept-fe-value-7">value</a> to the nearest <a href=common-microsyntaxes.html#concept-time id="time-state-(type=time):concept-time-4">time</a> for which the element would not <a href=form-control-infrastructure.html#suffering-from-a-step-mismatch id="time-state-(type=time):suffering-from-a-step-mismatch-2">suffer from a step mismatch</a>.</p>

  <p><strong>The <a href=#concept-input-value-string-number id="time-state-(type=time):concept-input-value-string-number">algorithm to convert a string to a
  number</a>, given a string <var>input</var>, is as follows</strong>: If <a href=common-microsyntaxes.html#parse-a-time-string id="time-state-(type=time):parse-a-time-string-2">parsing a time</a> from <var>input</var> results in an
  error, then return an error; otherwise, return the number of milliseconds elapsed from midnight to
  the parsed <a href=common-microsyntaxes.html#concept-time id="time-state-(type=time):concept-time-5">time</a> on a day with no time changes.</p>

  <p><strong>The <a href=#concept-input-value-number-string id="time-state-(type=time):concept-input-value-number-string">algorithm to convert a number to a
  string</a>, given a number <var>input</var>, is as follows</strong>: Return a
  <a id="time-state-(type=time):valid-time-string-8" href=common-microsyntaxes.html#valid-time-string>valid time string</a> that represents the <a href=common-microsyntaxes.html#concept-time id="time-state-(type=time):concept-time-6">time</a> that is
  <var>input</var> milliseconds after midnight on a day with no time changes.</p>

  <p><strong>The <a href=#concept-input-value-string-date id="time-state-(type=time):concept-input-value-string-date">algorithm to convert a string to a
  <code>Date</code> object</a>, given a string <var>input</var>, is as
  follows</strong>: If <a href=common-microsyntaxes.html#parse-a-time-string id="time-state-(type=time):parse-a-time-string-3">parsing a time</a> from
  <var>input</var> results
  in an error, then return an error; otherwise, return <a href=infrastructure.html#create-a-date-object id="time-state-(type=time):create-a-date-object">a new
  <code>Date</code> object</a> representing the parsed <a href=common-microsyntaxes.html#concept-time id="time-state-(type=time):concept-time-7">time</a> in
  UTC on 1970-01-01.</p>

  <p><strong>The <a href=#concept-input-value-date-string id="time-state-(type=time):concept-input-value-date-string">algorithm to convert a
  <code>Date</code> object to a string</a>, given a <code id="time-state-(type=time):date"><a data-x-internal=date href=https://tc39.es/ecma262/#sec-date-objects>Date</a></code> object <var>input</var>, is
  as follows</strong>: Return a <a id="time-state-(type=time):valid-time-string-9" href=common-microsyntaxes.html#valid-time-string>valid time string</a> that represents the UTC <a href=common-microsyntaxes.html#concept-time id="time-state-(type=time):concept-time-8">time</a> component that is represented by <var>input</var>.</p>

  

  <div class=bookkeeping>

   <p>The following common <code id="time-state-(type=time):the-input-element-3"><a href=#the-input-element>input</a></code> element content attributes, IDL attributes, and
   methods <a href=#concept-input-apply id="time-state-(type=time):concept-input-apply">apply</a> to the element:
   <code id="time-state-(type=time):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="time-state-(type=time):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="time-state-(type=time):attr-input-max-2"><a href=#attr-input-max>max</a></code>,
   <code id="time-state-(type=time):attr-input-min-2"><a href=#attr-input-min>min</a></code>,
   <code id="time-state-(type=time):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="time-state-(type=time):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="time-state-(type=time):attr-input-step-2"><a href=#attr-input-step>step</a></code> content attributes;
   <code id="time-state-(type=time):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="time-state-(type=time):dom-input-value"><a href=#dom-input-value>value</a></code>,
   <code id="time-state-(type=time):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="time-state-(type=time):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="time-state-(type=time):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="time-state-(type=time):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="time-state-(type=time):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="time-state-(type=time):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <a href=#dom-input-value-value id="time-state-(type=time):dom-input-value-value">value</a>.</p>

   <p>The <code id="time-state-(type=time):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="time-state-(type=time):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="time-state-(type=time):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="time-state-(type=time):do-not-apply">do not apply</a> to the
   element:
   <code id="time-state-(type=time):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="time-state-(type=time):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="time-state-(type=time):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="time-state-(type=time):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="time-state-(type=time):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="time-state-(type=time):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="time-state-(type=time):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="time-state-(type=time):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="time-state-(type=time):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="time-state-(type=time):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="time-state-(type=time):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="time-state-(type=time):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="time-state-(type=time):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="time-state-(type=time):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="time-state-(type=time):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="time-state-(type=time):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="time-state-(type=time):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="time-state-(type=time):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="time-state-(type=time):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="time-state-(type=time):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="time-state-(type=time):attr-input-src"><a href=#attr-input-src>src</a></code>, and
   <code id="time-state-(type=time):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="time-state-(type=time):do-not-apply-2">do not apply</a> to the element:
   <code id="time-state-(type=time):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="time-state-(type=time):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="time-state-(type=time):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="time-state-(type=time):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>, and
   <code id="time-state-(type=time):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code> IDL attributes;
   <code id="time-state-(type=time):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="time-state-(type=time):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>


  <h6 id="local-date-and-time-state-(type=datetime-local)"><span class=secno>4.10.5.1.11</span> <dfn data-dfn-for=input data-dfn-type=element-state>Local Date and Time</dfn> state (<code>type=datetime-local</code>)<a href="#local-date-and-time-state-(type=datetime-local)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local title="<input> elements of type datetime-local create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes.">Element/input/datetime-local</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>93+</span></span><span class="safari yes"><span>Safari</span><span>14.1+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  

  <p>When an <code id="local-date-and-time-state-(type=datetime-local):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="local-date-and-time-state-(type=datetime-local):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#local-date-and-time-state-(type=datetime-local)" id="local-date-and-time-state-(type=datetime-local):local-date-and-time-state-(type=datetime-local)">Local Date and Time</a> state, the rules in
  this section apply.</p>

  

  <p>The <code id="local-date-and-time-state-(type=datetime-local):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="local-date-and-time-state-(type=datetime-local):represents" href=dom.html#represents>represents</a> a control for setting the element's
  <a href=form-control-infrastructure.html#concept-fe-value id="local-date-and-time-state-(type=datetime-local):concept-fe-value">value</a> to a string representing a <a href=common-microsyntaxes.html#concept-datetime-local id="local-date-and-time-state-(type=datetime-local):concept-datetime-local">local date and time</a>, with no time-zone offset
  information.</p>

  

  <p>If the element is <i id="local-date-and-time-state-(type=datetime-local):concept-fe-mutable"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, the user agent should allow the
  user to change the <a href=common-microsyntaxes.html#concept-datetime-local id="local-date-and-time-state-(type=datetime-local):concept-datetime-local-2">date and time</a> represented by its
  <a href=form-control-infrastructure.html#concept-fe-value id="local-date-and-time-state-(type=datetime-local):concept-fe-value-2">value</a>, as obtained by <a href=common-microsyntaxes.html#parse-a-local-date-and-time-string id="local-date-and-time-state-(type=datetime-local):parse-a-local-date-and-time-string">parsing a date and time</a> from it. User agents must not allow the user to set
  the <a href=form-control-infrastructure.html#concept-fe-value id="local-date-and-time-state-(type=datetime-local):concept-fe-value-3">value</a> to a non-empty string that is not a <a id="local-date-and-time-state-(type=datetime-local):valid-normalised-local-date-and-time-string" href=common-microsyntaxes.html#valid-normalised-local-date-and-time-string>valid
  normalized local date and time string</a>. If the user agent provides a user interface for
  selecting a <a href=common-microsyntaxes.html#concept-datetime-local id="local-date-and-time-state-(type=datetime-local):concept-datetime-local-3">local date and time</a>, then the <a href=form-control-infrastructure.html#concept-fe-value id="local-date-and-time-state-(type=datetime-local):concept-fe-value-4">value</a> must be set to a <a id="local-date-and-time-state-(type=datetime-local):valid-normalised-local-date-and-time-string-2" href=common-microsyntaxes.html#valid-normalised-local-date-and-time-string>valid normalized local date and time
  string</a> representing the user's selection. User agents should allow the user to set the
  <a href=form-control-infrastructure.html#concept-fe-value id="local-date-and-time-state-(type=datetime-local):concept-fe-value-5">value</a> to the empty string.</p>

  <p><strong>Constraint validation</strong>: While the user interface describes input that the user
  agent cannot convert to a <a id="local-date-and-time-state-(type=datetime-local):valid-normalised-local-date-and-time-string-3" href=common-microsyntaxes.html#valid-normalised-local-date-and-time-string>valid normalized local date and time string</a>, the control is
  <a id="local-date-and-time-state-(type=datetime-local):suffering-from-bad-input" href=form-control-infrastructure.html#suffering-from-bad-input>suffering from bad input</a>.</p>

  

  <p class=note>See the <a href=forms.html#input-author-notes>introduction section</a> for a discussion of
  the difference between the input format and submission format for date, time, and number form
  controls, and the <a href=#input-impl-notes>implementation notes</a>
  regarding localization of form controls.</p>

  <p>The <code id="local-date-and-time-state-(type=datetime-local):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not empty, must
  have a value that is a <a id="local-date-and-time-state-(type=datetime-local):valid-local-date-and-time-string" href=common-microsyntaxes.html#valid-local-date-and-time-string>valid local date and time string</a>.</p> 

  

  <p><strong>The <a href=#value-sanitization-algorithm id="local-date-and-time-state-(type=datetime-local):value-sanitization-algorithm">value sanitization algorithm</a> is as follows</strong>: If the <a href=form-control-infrastructure.html#concept-fe-value id="local-date-and-time-state-(type=datetime-local):concept-fe-value-6">value</a> of the element is a <a id="local-date-and-time-state-(type=datetime-local):valid-local-date-and-time-string-2" href=common-microsyntaxes.html#valid-local-date-and-time-string>valid local date and time
  string</a>, then set it to a <a id="local-date-and-time-state-(type=datetime-local):valid-normalised-local-date-and-time-string-4" href=common-microsyntaxes.html#valid-normalised-local-date-and-time-string>valid normalized local date and time string</a>
  representing the same date and time; otherwise, set it to the empty string instead.</p>

  

  <p>The <code id="local-date-and-time-state-(type=datetime-local):attr-input-min"><a href=#attr-input-min>min</a></code> attribute, if specified, must have a value that is
  a <a id="local-date-and-time-state-(type=datetime-local):valid-local-date-and-time-string-3" href=common-microsyntaxes.html#valid-local-date-and-time-string>valid local date and time string</a>. The <code id="local-date-and-time-state-(type=datetime-local):attr-input-max"><a href=#attr-input-max>max</a></code>
  attribute, if specified, must have a value that is a <a id="local-date-and-time-state-(type=datetime-local):valid-local-date-and-time-string-4" href=common-microsyntaxes.html#valid-local-date-and-time-string>valid local date and time
  string</a>.</p>

  <p>The <code id="local-date-and-time-state-(type=datetime-local):attr-input-step"><a href=#attr-input-step>step</a></code> attribute is expressed in seconds. The <a href=#concept-input-step-scale id="local-date-and-time-state-(type=datetime-local):concept-input-step-scale">step scale factor</a> is 1000 (which
  converts the seconds to milliseconds, as used in the other algorithms). The <a href=#concept-input-step-default id="local-date-and-time-state-(type=datetime-local):concept-input-step-default">default step</a> is 60 seconds.</p>

  

  <p>When the element is <a id="local-date-and-time-state-(type=datetime-local):suffering-from-a-step-mismatch" href=form-control-infrastructure.html#suffering-from-a-step-mismatch>suffering from a step mismatch</a>, the user agent may round the
  element's <a href=form-control-infrastructure.html#concept-fe-value id="local-date-and-time-state-(type=datetime-local):concept-fe-value-7">value</a> to the nearest <a href=common-microsyntaxes.html#concept-datetime-local id="local-date-and-time-state-(type=datetime-local):concept-datetime-local-4">local date and time</a> for which the element would not <a href=form-control-infrastructure.html#suffering-from-a-step-mismatch id="local-date-and-time-state-(type=datetime-local):suffering-from-a-step-mismatch-2">suffer from a step mismatch</a>.</p>

  <p><strong>The <a href=#concept-input-value-string-number id="local-date-and-time-state-(type=datetime-local):concept-input-value-string-number">algorithm to convert a string to a
  number</a>, given a string <var>input</var>, is as follows</strong>: If <a href=common-microsyntaxes.html#parse-a-local-date-and-time-string id="local-date-and-time-state-(type=datetime-local):parse-a-local-date-and-time-string-2">parsing a date and time</a> from <var>input</var> results in an error, then return an error; otherwise, return the number of
  milliseconds elapsed from midnight on the morning of 1970-01-01 (the time represented by the value
  "<code>1970-01-01T00:00:00.0</code>") to the parsed <a href=common-microsyntaxes.html#concept-datetime-local id="local-date-and-time-state-(type=datetime-local):concept-datetime-local-5">local date and time</a>, ignoring leap seconds.</p>

  <p><strong>The <a href=#concept-input-value-number-string id="local-date-and-time-state-(type=datetime-local):concept-input-value-number-string">algorithm to convert a number to a
  string</a>, given a number <var>input</var>, is as follows</strong>: Return a
  <a id="local-date-and-time-state-(type=datetime-local):valid-normalised-local-date-and-time-string-5" href=common-microsyntaxes.html#valid-normalised-local-date-and-time-string>valid normalized local date and time string</a> that represents the date and time that is
  <var>input</var> milliseconds after midnight on the morning of 1970-01-01 (the time
  represented by the value "<code>1970-01-01T00:00:00.0</code>").</p>

  

  <p class=note>See <a href=#only-contemporary-times>the note on historical dates</a> in the
  <a href="#date-state-(type=date)" id="local-date-and-time-state-(type=datetime-local):date-state-(type=date)">Date</a> state section.</p>

  <div class=bookkeeping>

   <p>The following common <code id="local-date-and-time-state-(type=datetime-local):the-input-element-3"><a href=#the-input-element>input</a></code> element content
   attributes, IDL attributes, and methods <a href=#concept-input-apply id="local-date-and-time-state-(type=datetime-local):concept-input-apply">apply</a> to the element:
   <code id="local-date-and-time-state-(type=datetime-local):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-max-2"><a href=#attr-input-max>max</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-min-2"><a href=#attr-input-min>min</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-step-2"><a href=#attr-input-step>step</a></code> content attributes;
   <code id="local-date-and-time-state-(type=datetime-local):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):dom-input-value"><a href=#dom-input-value>value</a></code>, and
   <code id="local-date-and-time-state-(type=datetime-local):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="local-date-and-time-state-(type=datetime-local):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="local-date-and-time-state-(type=datetime-local):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="local-date-and-time-state-(type=datetime-local):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is
   in mode <a href=#dom-input-value-value id="local-date-and-time-state-(type=datetime-local):dom-input-value-value">value</a>.</p>

   <p>The <code id="local-date-and-time-state-(type=datetime-local):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="local-date-and-time-state-(type=datetime-local):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="local-date-and-time-state-(type=datetime-local):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="local-date-and-time-state-(type=datetime-local):do-not-apply">do not
   apply</a> to the element:
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):attr-input-src"><a href=#attr-input-src>src</a></code>, and
   <code id="local-date-and-time-state-(type=datetime-local):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="local-date-and-time-state-(type=datetime-local):do-not-apply-2">do not apply</a> to the
   element:
   <code id="local-date-and-time-state-(type=datetime-local):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="local-date-and-time-state-(type=datetime-local):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, and
   <code id="local-date-and-time-state-(type=datetime-local):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code> IDL attributes;
   <code id="local-date-and-time-state-(type=datetime-local):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="local-date-and-time-state-(type=datetime-local):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>

  <div class=example>

   <p>The following example shows part of a flight booking application. The application uses an
   <code id="local-date-and-time-state-(type=datetime-local):the-input-element-4"><a href=#the-input-element>input</a></code> element with its <code id="local-date-and-time-state-(type=datetime-local):attr-input-type-2"><a href=#attr-input-type>type</a></code> attribute set to
   <code id="local-date-and-time-state-(type=datetime-local):local-date-and-time-state-(type=datetime-local)-2"><a href="#local-date-and-time-state-(type=datetime-local)">datetime-local</a></code>, and it then interprets the
   given date and time in the time zone of the selected airport.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->Destination<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Airport: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>to</c-> <c- e>list</c-><c- o>=</c-><c- s>airports</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Departure time: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>datetime-local</c-> <c- e>name</c-><c- o>=</c-><c- s>totime</c-> <c- e>step</c-><c- o>=</c-><c- s>3600</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>airports</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>ATL</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Atlanta&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>MEM</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Memphis&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>LHR</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;London Heathrow&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>LAX</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Los Angeles&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>FRA</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Frankfurt&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h6 id="number-state-(type=number)"><span class=secno>4.10.5.1.12</span> <dfn data-dfn-for=input id=number-state data-dfn-type=element-state>Number</dfn> state (<code>type=number</code>)<a href="#number-state-(type=number)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number title="<input> elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.">Element/input/number</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>29+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>7+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>When an <code id="number-state-(type=number):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="number-state-(type=number):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#number-state-(type=number)" id="number-state-(type=number):number-state-(type=number)">Number</a> state, the rules in this section apply.</p>

  

  <p>The <code id="number-state-(type=number):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="number-state-(type=number):represents" href=dom.html#represents>represents</a> a control for setting the element's
  <a href=form-control-infrastructure.html#concept-fe-value id="number-state-(type=number):concept-fe-value">value</a> to a string representing a number.</p>

  

  <p>If the element is <i id="number-state-(type=number):concept-fe-mutable"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, the user agent should allow the
  user to change the number represented by its <a href=form-control-infrastructure.html#concept-fe-value id="number-state-(type=number):concept-fe-value-2">value</a>, as
  obtained from applying the <a id="number-state-(type=number):rules-for-parsing-floating-point-number-values" href=common-microsyntaxes.html#rules-for-parsing-floating-point-number-values>rules for parsing floating-point number values</a> to it. User
  agents must not allow the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="number-state-(type=number):concept-fe-value-3">value</a> to a
  non-empty string that is not a <a id="number-state-(type=number):valid-floating-point-number" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a>. If the user agent
  provides a user interface for selecting a number, then the <a href=form-control-infrastructure.html#concept-fe-value id="number-state-(type=number):concept-fe-value-4">value</a> must be set to the <a href=common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number id="number-state-(type=number):best-representation-of-the-number-as-a-floating-point-number">best representation of the number representing the user's
  selection as a floating-point number</a>. User agents should allow the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="number-state-(type=number):concept-fe-value-5">value</a> to the empty string.</p>

  <p><strong>Constraint validation</strong>: While the user interface describes input that the user
  agent cannot convert to a <a id="number-state-(type=number):valid-floating-point-number-2" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a>, the control is <a id="number-state-(type=number):suffering-from-bad-input" href=form-control-infrastructure.html#suffering-from-bad-input>suffering
  from bad input</a>.</p>

  

  <p class=note>This specification does not define what user interface user agents are to use;
  user agent vendors are encouraged to consider what would best serve their users' needs. For
  example, a user agent in Persian or Arabic markets might support Persian and Arabic numeric input
  (converting it to the format required for submission as described above). Similarly, a user agent
  designed for Romans might display the value in Roman numerals rather than in decimal; or (more
  realistically) a user agent designed for the French market might display the value with
  apostrophes between thousands and commas before the decimals, and allow the user to enter a value
  in that manner, internally converting it to the submission format described above.</p>

  <p>The <code id="number-state-(type=number):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not empty, must
  have a value that is a <a id="number-state-(type=number):valid-floating-point-number-3" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a>.</p> 

  

  <p><strong>The <a href=#value-sanitization-algorithm id="number-state-(type=number):value-sanitization-algorithm">value sanitization algorithm</a> is as follows</strong>: If the <a href=form-control-infrastructure.html#concept-fe-value id="number-state-(type=number):concept-fe-value-6">value</a> of the element is not a <a id="number-state-(type=number):valid-floating-point-number-4" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point
  number</a>, then set it to the empty string instead.</p>

  

  <p>The <code id="number-state-(type=number):attr-input-min"><a href=#attr-input-min>min</a></code> attribute, if specified, must have a value that is
  a <a id="number-state-(type=number):valid-floating-point-number-5" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a>. The <code id="number-state-(type=number):attr-input-max"><a href=#attr-input-max>max</a></code> attribute,
  if specified, must have a value that is a <a id="number-state-(type=number):valid-floating-point-number-6" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a>.</p>

  <p>The <a href=#concept-input-step-scale id="number-state-(type=number):concept-input-step-scale">step scale factor</a> is
  1. The <a href=#concept-input-step-default id="number-state-(type=number):concept-input-step-default">default step</a> is 1 (allowing only
  integers to be selected by the user, unless the <a href=#concept-input-min-zero id="number-state-(type=number):concept-input-min-zero">step
  base</a> has a non-integer value).</p>

  

  <p>When the element is <a id="number-state-(type=number):suffering-from-a-step-mismatch" href=form-control-infrastructure.html#suffering-from-a-step-mismatch>suffering from a step mismatch</a>, the user agent may round the
  element's <a href=form-control-infrastructure.html#concept-fe-value id="number-state-(type=number):concept-fe-value-7">value</a> to the nearest number for which the element
  would not <a href=form-control-infrastructure.html#suffering-from-a-step-mismatch id="number-state-(type=number):suffering-from-a-step-mismatch-2">suffer from a step mismatch</a>. If
  there are two such numbers, user agents are encouraged to pick the one nearest positive
  infinity.</p>

  <p><strong>The <a href=#concept-input-value-string-number id="number-state-(type=number):concept-input-value-string-number">algorithm to convert a string to a
  number</a>, given a string <var>input</var>, is as follows</strong>: If applying the
  <a id="number-state-(type=number):rules-for-parsing-floating-point-number-values-2" href=common-microsyntaxes.html#rules-for-parsing-floating-point-number-values>rules for parsing floating-point number values</a> to <var>input</var> results
  in an error, then return an error; otherwise, return the resulting number.</p>

  <p><strong>The <a href=#concept-input-value-number-string id="number-state-(type=number):concept-input-value-number-string">algorithm to convert a number to a
  string</a>, given a number <var>input</var>, is as follows</strong>: Return a
  <a id="number-state-(type=number):valid-floating-point-number-7" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a> that represents <var>input</var>.</p>

  

  <div class=bookkeeping>

   <p>The following common <code id="number-state-(type=number):the-input-element-3"><a href=#the-input-element>input</a></code> element content attributes, IDL attributes, and
   methods <a href=#concept-input-apply id="number-state-(type=number):concept-input-apply">apply</a> to the element:
   <code id="number-state-(type=number):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="number-state-(type=number):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="number-state-(type=number):attr-input-max-2"><a href=#attr-input-max>max</a></code>,
   <code id="number-state-(type=number):attr-input-min-2"><a href=#attr-input-min>min</a></code>,
   <code id="number-state-(type=number):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="number-state-(type=number):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="number-state-(type=number):attr-input-required"><a href=#attr-input-required>required</a></code>, and
   <code id="number-state-(type=number):attr-input-step"><a href=#attr-input-step>step</a></code> content attributes;
   <code id="number-state-(type=number):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="number-state-(type=number):dom-input-value"><a href=#dom-input-value>value</a></code>, and
   <code id="number-state-(type=number):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="number-state-(type=number):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="number-state-(type=number):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="number-state-(type=number):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="number-state-(type=number):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <a href=#dom-input-value-value id="number-state-(type=number):dom-input-value-value">value</a>.</p>

   <p>The <code id="number-state-(type=number):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="number-state-(type=number):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="number-state-(type=number):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="number-state-(type=number):do-not-apply">do not apply</a> to the
   element:
   <code id="number-state-(type=number):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="number-state-(type=number):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="number-state-(type=number):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="number-state-(type=number):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="number-state-(type=number):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="number-state-(type=number):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="number-state-(type=number):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="number-state-(type=number):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="number-state-(type=number):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="number-state-(type=number):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="number-state-(type=number):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="number-state-(type=number):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="number-state-(type=number):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="number-state-(type=number):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="number-state-(type=number):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="number-state-(type=number):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="number-state-(type=number):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="number-state-(type=number):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="number-state-(type=number):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="number-state-(type=number):attr-input-src"><a href=#attr-input-src>src</a></code>, and
   <code id="number-state-(type=number):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="number-state-(type=number):do-not-apply-2">do not apply</a> to the element:
   <code id="number-state-(type=number):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="number-state-(type=number):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="number-state-(type=number):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="number-state-(type=number):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="number-state-(type=number):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, and
   <code id="number-state-(type=number):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code> IDL attributes;
   <code id="number-state-(type=number):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="number-state-(type=number):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>

  <div class=example>

   <p>Here is an example of using a numeric input control:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->How much do you want to charge? $<c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>number</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>step</c-><c- o>=</c-><c- s>0.01</c-> <c- e>name</c-><c- o>=</c-><c- s>price</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

   <p>As described above, a user agent might support numeric input in the user's local format,
   converting it to the format required for submission as described above. This might include
   handling grouping separators (as in "872,000,000,000") and various decimal separators (such as
   "3,99" vs "3.99") or using local digits (such as those in Arabic, Devanagari, Persian, and
   Thai).</p>

  </div>

  <p id=when-number-is-not-appropriate class=note><a href=#when-number-is-not-appropriate class=self-link></a>The <code>type=number</code> state
  is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a
  number. For example, it would be inappropriate for credit card numbers or US postal codes. A
  simple way of determining whether to use <code>type=number</code> is to consider whether
  it would make sense for the input control to have a spinbox interface (e.g. with "up" and "down"
  arrows). Getting a credit card number wrong by 1 in the last digit isn't a minor mistake, it's as
  wrong as getting every digit incorrect. So it would not make sense for the user to select a credit
  card number using "up" and "down" buttons. When a spinbox interface is not appropriate, <code>type=text</code> is probably the right choice (possibly with an <code id="number-state-(type=number):attr-inputmode"><a href=interaction.html#attr-inputmode>inputmode</a></code> or <code id="number-state-(type=number):attr-input-pattern-2"><a href=#attr-input-pattern>pattern</a></code>
  attribute).</p>



  <h6 id="range-state-(type=range)"><span class=secno>4.10.5.1.13</span> <dfn data-dfn-for=input data-dfn-type=element-state>Range</dfn> state (<code>type=range</code>)<a href="#range-state-(type=range)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range title="<input> elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box like the number input type.">Element/input/range</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>23+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>52+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>57+</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  

  <p>When an <code id="range-state-(type=range):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="range-state-(type=range):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#range-state-(type=range)" id="range-state-(type=range):range-state-(type=range)">Range</a> state, the rules in this section apply.</p>

  

  <p>The <code id="range-state-(type=range):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="range-state-(type=range):represents" href=dom.html#represents>represents</a> a control for setting the element's
  <a href=form-control-infrastructure.html#concept-fe-value id="range-state-(type=range):concept-fe-value">value</a> to a string representing a number, but with the
  caveat that the exact value is not important, letting UAs provide a simpler interface than they
  do for the <a href="#number-state-(type=number)" id="range-state-(type=range):number-state-(type=number)">Number</a> state.</p>

  

  <p>If the element is <i id="range-state-(type=range):concept-fe-mutable"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, the user agent should allow the
  user to change the number represented by its <a href=form-control-infrastructure.html#concept-fe-value id="range-state-(type=range):concept-fe-value-2">value</a>, as
  obtained from applying the <a id="range-state-(type=range):rules-for-parsing-floating-point-number-values" href=common-microsyntaxes.html#rules-for-parsing-floating-point-number-values>rules for parsing floating-point number values</a> to it.
  User agents must not allow the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="range-state-(type=range):concept-fe-value-3">value</a> to a
  string that is not a <a id="range-state-(type=range):valid-floating-point-number" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a>. If the user agent provides a user
  interface for selecting a number, then the <a href=form-control-infrastructure.html#concept-fe-value id="range-state-(type=range):concept-fe-value-4">value</a> must be
  set to a <a href=common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number id="range-state-(type=range):best-representation-of-the-number-as-a-floating-point-number">best
  representation of the number representing the user's selection as a floating-point
  number</a>. User agents must not allow the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="range-state-(type=range):concept-fe-value-5">value</a> to the empty string.</p>

  <p><strong>Constraint validation</strong>: While the user interface describes input that the
  user agent cannot convert to a <a id="range-state-(type=range):valid-floating-point-number-2" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a>, the control is
  <a id="range-state-(type=range):suffering-from-bad-input" href=form-control-infrastructure.html#suffering-from-bad-input>suffering from bad input</a>.</p>

  

  <p>The <code id="range-state-(type=range):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified, must have a value
  that is a <a id="range-state-(type=range):valid-floating-point-number-3" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a>.</p> 

  

  <p><strong>The <a href=#value-sanitization-algorithm id="range-state-(type=range):value-sanitization-algorithm">value sanitization algorithm</a> is as follows</strong>: If the <a href=form-control-infrastructure.html#concept-fe-value id="range-state-(type=range):concept-fe-value-6">value</a> of the element is not a <a id="range-state-(type=range):valid-floating-point-number-4" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point
  number</a>, then set it to the <a href=common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number id="range-state-(type=range):best-representation-of-the-number-as-a-floating-point-number-2">best representation, as a floating-point number</a>, of the <a href=#concept-input-value-default-range id="range-state-(type=range):concept-input-value-default-range">default value</a>.</p>

  

  <p>The <dfn id=concept-input-value-default-range>default value</dfn> is the <a href=#concept-input-min id="range-state-(type=range):concept-input-min">minimum</a> plus half the difference between the <a href=#concept-input-min id="range-state-(type=range):concept-input-min-2">minimum</a> and the <a href=#concept-input-max id="range-state-(type=range):concept-input-max">maximum</a>, unless the <a href=#concept-input-max id="range-state-(type=range):concept-input-max-2">maximum</a> is less than the <a href=#concept-input-min id="range-state-(type=range):concept-input-min-3">minimum</a>, in which case the <a href=#concept-input-value-default-range id="range-state-(type=range):concept-input-value-default-range-2">default value</a> is the <a href=#concept-input-min id="range-state-(type=range):concept-input-min-4">minimum</a>.</p>

  

  <p>When the element is <a id="range-state-(type=range):suffering-from-an-underflow" href=form-control-infrastructure.html#suffering-from-an-underflow>suffering from an underflow</a>, the user agent must set the
  element's <a href=form-control-infrastructure.html#concept-fe-value id="range-state-(type=range):concept-fe-value-7">value</a> to the <a href=common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number id="range-state-(type=range):best-representation-of-the-number-as-a-floating-point-number-3">best representation, as a floating-point
  number</a>, of the <a href=#concept-input-min id="range-state-(type=range):concept-input-min-5">minimum</a>.</p>

  <p>When the element is <a id="range-state-(type=range):suffering-from-an-overflow" href=form-control-infrastructure.html#suffering-from-an-overflow>suffering from an overflow</a>, if the <a href=#concept-input-max id="range-state-(type=range):concept-input-max-3">maximum</a> is not less than the <a href=#concept-input-min id="range-state-(type=range):concept-input-min-6">minimum</a>, the user agent must set the element's <a href=form-control-infrastructure.html#concept-fe-value id="range-state-(type=range):concept-fe-value-8">value</a> to a <a id="range-state-(type=range):valid-floating-point-number-5" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a> that
  represents the <a href=#concept-input-max id="range-state-(type=range):concept-input-max-4">maximum</a>.</p>

  <p>When the element is <a id="range-state-(type=range):suffering-from-a-step-mismatch" href=form-control-infrastructure.html#suffering-from-a-step-mismatch>suffering from a step mismatch</a>, the user agent must round
  the element's <a href=form-control-infrastructure.html#concept-fe-value id="range-state-(type=range):concept-fe-value-9">value</a> to the nearest number for which the
  element would not <a href=form-control-infrastructure.html#suffering-from-a-step-mismatch id="range-state-(type=range):suffering-from-a-step-mismatch-2">suffer from a step
  mismatch</a>, and which is greater than or equal to the <a href=#concept-input-min id="range-state-(type=range):concept-input-min-7">minimum</a>, and, if the <a href=#concept-input-max id="range-state-(type=range):concept-input-max-5">maximum</a> is not less than the <a href=#concept-input-min id="range-state-(type=range):concept-input-min-8">minimum</a>, which is less than or equal to the <a href=#concept-input-max id="range-state-(type=range):concept-input-max-6">maximum</a>, if there is a number that matches these constraints.
  If two numbers match these constraints, then user agents must use the one nearest to positive
  infinity.</p>

  <p class=example>For example, the markup
  <code>&lt;input type="range" min=0 max=100 step=20 value=50></code>
  results in a range control whose initial value is 60.</p>

  

  <div class=example>

   <p>Here is an example of a range control using an autocomplete list with the <code id="range-state-(type=range):attr-input-list"><a href=#attr-input-list>list</a></code> attribute. This could be useful if there are values along
   the full range of the control that are especially important, such as preconfigured light levels
   or typical speed limits in a range control used as a speed control. The following markup
   fragment:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;range&quot;</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;-100&quot;</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;100&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;0&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;10&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;power&quot;</c-> <c- e>list</c-><c- o>=</c-><c- s>&quot;powers&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;powers&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;0&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;-30&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;30&quot;</c-><c- p>&gt;</c->
<span class='bad'> <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;++50&quot;</c-><c- p>&gt;</c-></span>
<c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c-></code></pre>

   <p>...with the following style sheet applied:</p>

   <pre><code class='css'><c- f>input </c-><c- p>{</c-> <c- k>writing-mode</c-><c- p>:</c-> vertical-lr<c- p>;</c-> <c- k>height</c-><c- p>:</c-> <c- m>75</c-><c- l>px</c-><c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- m>49</c-><c- l>px</c-><c- p>;</c-> <c- k>background</c-><c- p>:</c-> #D5CCBB<c- p>;</c-> <c- k>color</c-><c- p>:</c-> black<c- p>;</c-> <c- p>}</c-></code></pre>

   <p>...might render as:</p>

   <p><img src=../images/sample-range.png width=49 alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." height=75>

   <p>Note how the UA determined the orientation of the control from the ratio of the
   style-sheet-specified height and width properties. The colors were similarly derived from the
   style sheet. The tick marks, however, were derived from the markup. In particular, the <code id="range-state-(type=range):attr-input-step"><a href=#attr-input-step>step</a></code> attribute has not affected the placement of tick marks,
   the UA deciding to only use the author-specified completion values and then adding longer tick
   marks at the extremes.</p>

   <p>Note also how the invalid value <code>++50</code> was ignored.</p>

  </div>

  <div class=example>

   <p>For another example, consider the following markup fragment:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>x</c-> <c- e>type</c-><c- o>=</c-><c- s>range</c-> <c- e>min</c-><c- o>=</c-><c- s>100</c-> <c- e>max</c-><c- o>=</c-><c- s>700</c-> <c- e>step</c-><c- o>=</c-><c- s>9.09090909</c-> <c- e>value</c-><c- o>=</c-><c- s>509.090909</c-><c- p>&gt;</c-></code></pre>

   <p>A user agent could display in a variety of ways, for instance:</p>

   <p><img src=../images/sample-range-2a.png width=231 alt="As a dial." height=57></p>

   <p>Or, alternatively, for instance:</p>

   <p><img src=../images/sample-range-2b.png width=445 alt="As a long horizontal slider with tick marks." height=56></p>

   <p>The user agent could pick which one to display based on the dimensions given in the style
   sheet. This would allow it to maintain the same resolution for the tick marks, despite the
   differences in width.</p>

  </div>

  <div class=example>

   <p>Finally, here is an example of a range control with two labeled values:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;range&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;a&quot;</c-> <c- e>list</c-><c- o>=</c-><c- s>&quot;a-values&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;a-values&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;10&quot;</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Low&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;90&quot;</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;High&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c-></code></pre>

   <p>With styles that make the control draw vertically, it might look as follows:</p>

   <p><img src=../images/sample-range-labels.png width=103 alt="A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'." height=164>

  </div>

  <p class=note>In this state, the range and step constraints are enforced even during user input,
  and there is no way to set the value to the empty string.</p>

  <p>The <code id="range-state-(type=range):attr-input-min"><a href=#attr-input-min>min</a></code> attribute, if specified, must have a value that is
  a <a id="range-state-(type=range):valid-floating-point-number-6" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a>. The <a href=#concept-input-min-default id="range-state-(type=range):concept-input-min-default">default
  minimum</a> is 0. The <code id="range-state-(type=range):attr-input-max"><a href=#attr-input-max>max</a></code> attribute, if specified, must
  have a value that is a <a id="range-state-(type=range):valid-floating-point-number-7" href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a>. The <a href=#concept-input-max-default id="range-state-(type=range):concept-input-max-default">default maximum</a> is 100.</p>

  <p>The <a href=#concept-input-step-scale id="range-state-(type=range):concept-input-step-scale">step scale factor</a> is
  1. The <a href=#concept-input-step-default id="range-state-(type=range):concept-input-step-default">default step</a> is 1 (allowing only
  integers, unless the <code id="range-state-(type=range):attr-input-min-2"><a href=#attr-input-min>min</a></code> attribute has a non-integer
  value).</p>

  

  <p><strong>The <a href=#concept-input-value-string-number id="range-state-(type=range):concept-input-value-string-number">algorithm to convert a string to a
  number</a>, given a string <var>input</var>, is as follows</strong>: If applying the
  <a id="range-state-(type=range):rules-for-parsing-floating-point-number-values-2" href=common-microsyntaxes.html#rules-for-parsing-floating-point-number-values>rules for parsing floating-point number values</a> to <var>input</var> results
  in an error, then return an error; otherwise, return the resulting number.</p>

  <p><strong>The <a href=#concept-input-value-number-string id="range-state-(type=range):concept-input-value-number-string">algorithm to convert a number to a
  string</a>, given a number <var>input</var>, is as follows</strong>: Return the <a href=common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number id="range-state-(type=range):best-representation-of-the-number-as-a-floating-point-number-4">best representation, as a
  floating-point number</a>, of <var>input</var>.</p>

  

  <div class=bookkeeping>

   <p>The following common <code id="range-state-(type=range):the-input-element-3"><a href=#the-input-element>input</a></code> element content attributes, IDL attributes, and
   methods <a href=#concept-input-apply id="range-state-(type=range):concept-input-apply">apply</a> to the element:
   <code id="range-state-(type=range):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="range-state-(type=range):attr-input-list-2"><a href=#attr-input-list>list</a></code>,
   <code id="range-state-(type=range):attr-input-max-2"><a href=#attr-input-max>max</a></code>,
   <code id="range-state-(type=range):attr-input-min-3"><a href=#attr-input-min>min</a></code>, and
   <code id="range-state-(type=range):attr-input-step-2"><a href=#attr-input-step>step</a></code> content attributes;
   <code id="range-state-(type=range):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="range-state-(type=range):dom-input-value"><a href=#dom-input-value>value</a></code>, and
   <code id="range-state-(type=range):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="range-state-(type=range):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code> and
   <code id="range-state-(type=range):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="range-state-(type=range):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <a href=#dom-input-value-value id="range-state-(type=range):dom-input-value-value">value</a>.</p>

   <p>The <code id="range-state-(type=range):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="range-state-(type=range):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="range-state-(type=range):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="range-state-(type=range):do-not-apply">do not apply</a> to the
   element:
   <code id="range-state-(type=range):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="range-state-(type=range):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="range-state-(type=range):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="range-state-(type=range):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="range-state-(type=range):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="range-state-(type=range):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="range-state-(type=range):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="range-state-(type=range):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="range-state-(type=range):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="range-state-(type=range):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="range-state-(type=range):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="range-state-(type=range):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="range-state-(type=range):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="range-state-(type=range):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="range-state-(type=range):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="range-state-(type=range):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="range-state-(type=range):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="range-state-(type=range):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="range-state-(type=range):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="range-state-(type=range):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="range-state-(type=range):attr-input-required"><a href=#attr-input-required>required</a></code>,
   <code id="range-state-(type=range):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="range-state-(type=range):attr-input-src"><a href=#attr-input-src>src</a></code>, and
   <code id="range-state-(type=range):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="range-state-(type=range):do-not-apply-2">do not apply</a> to the element:
   <code id="range-state-(type=range):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="range-state-(type=range):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="range-state-(type=range):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="range-state-(type=range):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="range-state-(type=range):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, and
   <code id="range-state-(type=range):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code> IDL attributes;
   <code id="range-state-(type=range):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="range-state-(type=range):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and
   <code id="range-state-(type=range):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods.</p>

  </div>



  <h6 id="color-state-(type=color)"><span class=secno>4.10.5.1.14</span> <dfn data-dfn-for=input data-dfn-type=element-state>Color</dfn> state (<code>type=color</code>)<a href="#color-state-(type=color)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color title="<input> elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format.">Element/input/color</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>29+</span></span><span class="safari yes"><span>Safari</span><span>12.1+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>14+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span title="Partial implementation.">🔰 27+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div>

  

  <p>When an <code id="color-state-(type=color):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="color-state-(type=color):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#color-state-(type=color)" id="color-state-(type=color):color-state-(type=color)">Color</a> state, the rules in this section apply.</p>

  

  <p>The <code id="color-state-(type=color):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="color-state-(type=color):represents" href=dom.html#represents>represents</a> a color well control, for setting the
  element's <a href=form-control-infrastructure.html#concept-fe-value id="color-state-(type=color):concept-fe-value">value</a> to a string representing the serialization
  of a CSS color.</p>

  <p class=note>In this state, there is always a CSS color picked, and there is no way for the end
  user to set the value to the empty string.</p>

  <p>The <dfn data-dfn-for=input id=attr-input-alpha data-dfn-type=element-attr><code>alpha</code></dfn> attribute
  is a <a id="color-state-(type=color):boolean-attribute" href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. If present, it indicates the CSS color's alpha component can
  be manipulated by the end user and does not have to be fully opaque.</p>

  <p>The <dfn data-dfn-for=input id=attr-input-colorspace data-dfn-type=element-attr><code>colorspace</code></dfn>
  attribute indicates the color space of the serialized CSS color. It also hints at the desired user
  interface for selecting a CSS color. It is an <a id="color-state-(type=color):enumerated-attribute" href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following
  keywords and states:</p>

  <table><thead><tr><th> Keyword
     <th> State
     <th> Brief description
   <tbody><tr><td><dfn data-dfn-for=input/colorspace id=attr-input-colorspace-limited-srgb data-dfn-type=attr-value><code>limited-srgb</code></dfn>
     <td><dfn id=attr-input-colorspace-limited-srgb-state>Limited sRGB</dfn>
     <td>The CSS color is converted to the <a id="color-state-(type=color):'srgb'" href=https://drafts.csswg.org/css-color/#valdef-color-srgb data-x-internal="'srgb'">'srgb'</a> color space and limited to 8-bits per
     component, e.g., "<code>#123456</code>" or "<code>color(srgb 0 1 0 / 0.5)</code>".
    <tr><td><dfn data-dfn-for=input/colorspace id=attr-input-colorspace-display-p3 data-dfn-type=attr-value><code>display-p3</code></dfn>
     <td><dfn id=attr-input-colorspace-display-p3-state>Display P3</dfn>
     <td>The CSS color is converted to the <a id="color-state-(type=color):'display-p3'" href=https://drafts.csswg.org/css-color/#valdef-color-display-p3 data-x-internal="'display-p3'">'display-p3'</a> color space, e.g., "<code>color(display-p3 1.84 -0.19 0.72 / 0.6)</code>".
  </table>

  <p>The attribute's <i id="color-state-(type=color):missing-value-default"><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id="color-state-(type=color):invalid-value-default"><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <a href=#attr-input-colorspace-limited-srgb-state id="color-state-(type=color):attr-input-colorspace-limited-srgb-state">Limited sRGB</a> state.</p>

  

  <p>Whenever the element's <code id="color-state-(type=color):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code> or <code id="color-state-(type=color):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code> attributes are changed, the user agent must run
  <a href=#update-a-color-well-control-color id="color-state-(type=color):update-a-color-well-control-color">update a color well control color</a> given the element.</p>
  

  <p>If the element is <i id="color-state-(type=color):concept-fe-mutable"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, the user agent should allow the
  user to change the color represented by its <a href=form-control-infrastructure.html#concept-fe-value id="color-state-(type=color):concept-fe-value-2">value</a>, as
  obtained from <a href=https://drafts.csswg.org/css-color/#parse-a-css-color-value id="color-state-(type=color):parsed-as-a-css-color-value" data-x-internal=parsed-as-a-css-color-value>parsing</a> it. User agents must not
  allow the user to set the <a href=form-control-infrastructure.html#concept-fe-value id="color-state-(type=color):concept-fe-value-3">value</a> to a string that running
  <a href=#update-a-color-well-control-color id="color-state-(type=color):update-a-color-well-control-color-2">update a color well control color</a> for the element would not set it to. If the user
  agent provides a user interface for selecting a CSS color, then the <a href=form-control-infrastructure.html#concept-fe-value id="color-state-(type=color):concept-fe-value-4">value</a> must be set to the result of <a href=#serialize-a-color-well-control-color id="color-state-(type=color):serialize-a-color-well-control-color">serializing a color well control color</a> given the element and the
  end user's selection.</p>

  <p>The <a href=#input-activation-behavior id="color-state-(type=color):input-activation-behavior">input activation behavior</a> for such an element <var>element</var> is to
  <a href=#show-the-picker,-if-applicable id="color-state-(type=color):show-the-picker,-if-applicable">show the picker, if applicable</a>, for <var>element</var>.</p>

  <p><strong>Constraint validation</strong>: While the element's <a href=form-control-infrastructure.html#concept-fe-value id="color-state-(type=color):concept-fe-value-5">value</a> is not the empty string and <a href=https://drafts.csswg.org/css-color/#parse-a-css-color-value id="color-state-(type=color):parsed-as-a-css-color-value-2" data-x-internal=parsed-as-a-css-color-value>parsing</a> it returns failure, the control is <a id="color-state-(type=color):suffering-from-bad-input" href=form-control-infrastructure.html#suffering-from-bad-input>suffering from bad
  input</a>.</p>

  

  <p>The <code id="color-state-(type=color):attr-input-value"><a href=#attr-input-value>value</a></code> attribute, if specified and not the empty
  string, must have a value that is a CSS color.</p>

  

  <p><strong>The <a href=#value-sanitization-algorithm id="color-state-(type=color):value-sanitization-algorithm">value sanitization algorithm</a> is as follows</strong>: Run <a href=#update-a-color-well-control-color id="color-state-(type=color):update-a-color-well-control-color-3">update
  a color well control color</a> for the element.</p>

  <p>To <dfn id=update-a-color-well-control-color>update a color well control color</dfn>, given an element <var>element</var>:</p>

  <ol><li><p><a id="color-state-(type=color):assert" href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>element</var> is an <code id="color-state-(type=color):the-input-element-3"><a href=#the-input-element>input</a></code> element whose <code id="color-state-(type=color):attr-input-type-2"><a href=#attr-input-type>type</a></code> attribute is in the <a href="#color-state-(type=color)" id="color-state-(type=color):color-state-(type=color)-2">Color</a> state.<li><p>Let <var>color</var> be the result of <a href=https://drafts.csswg.org/css-color/#parse-a-css-color-value id="color-state-(type=color):parsed-as-a-css-color-value-3" data-x-internal=parsed-as-a-css-color-value>parsing</a> <var>element</var>'s <a href=form-control-infrastructure.html#concept-fe-value id="color-state-(type=color):concept-fe-value-6">value</a>.<li><p>If <var>color</var> is failure, then set <var>color</var> to <a id="color-state-(type=color):opaque-black" href=https://drafts.csswg.org/css-color/#opaque-black data-x-internal=opaque-black>opaque
   black</a>.<li><p>Set <var>element</var>'s <a href=form-control-infrastructure.html#concept-fe-value id="color-state-(type=color):concept-fe-value-7">value</a> to the result of <a href=#serialize-a-color-well-control-color id="color-state-(type=color):serialize-a-color-well-control-color-2">serializing a color well control color</a> given
   <var>element</var> and <var>color</var>.</ol>

  <p>To <dfn id=serialize-a-color-well-control-color>serialize a color well control color</dfn>, given an element <var>element</var> and a
  CSS color <var>color</var>:</p>

  <ol><li><p><a id="color-state-(type=color):assert-2" href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>element</var> is an <code id="color-state-(type=color):the-input-element-4"><a href=#the-input-element>input</a></code> element whose <code id="color-state-(type=color):attr-input-type-3"><a href=#attr-input-type>type</a></code> attribute is in the <a href="#color-state-(type=color)" id="color-state-(type=color):color-state-(type=color)-3">Color</a> state.<li><p>Let <var>htmlCompatible</var> be false.<li><p>If <var>element</var>'s <code id="color-state-(type=color):attr-input-alpha-2"><a href=#attr-input-alpha>alpha</a></code> attribute is not
   specified, then set <var>color</var>'s alpha component to be fully opaque.<li>
    <p>If <var>element</var>'s <code id="color-state-(type=color):attr-input-colorspace-2"><a href=#attr-input-colorspace>colorspace</a></code> attribute is
    in the <a href=#attr-input-colorspace-limited-srgb-state id="color-state-(type=color):attr-input-colorspace-limited-srgb-state-2">Limited sRGB</a> state:</p>

    <ol><li><p>Set <var>color</var> to <var>color</var> <a href=https://drafts.csswg.org/css-color/#color-conversion id="color-state-(type=color):converting-colors" data-x-internal=converting-colors>converted</a> to the <a id="color-state-(type=color):'srgb'-2" href=https://drafts.csswg.org/css-color/#valdef-color-srgb data-x-internal="'srgb'">'srgb'</a> color space.<li><p>Round each of <var>color</var>'s components so they are in the range 0 to 255,
     inclusive. Components are to be <a href=https://drafts.csswg.org/css-values-4/#combine-integers>rounded towards +∞</a>.<li>
      <p>If <var>element</var>'s <code id="color-state-(type=color):attr-input-alpha-3"><a href=#attr-input-alpha>alpha</a></code> attribute is not
      specified, then set <var>htmlCompatible</var> to true.</p>

      <p class=note>This intentionally uses a different serialization path for compatibility with
      an earlier version of the color well control.</p>
     <li><p>Otherwise, set <var>color</var> to <var>color</var> converted using the
     <a id="color-state-(type=color):color-function" href=https://drafts.csswg.org/css-color/#color-function data-x-internal=color-function>'color()'</a> function.</ol>
   <li>
    <p>Otherwise:</p>

    <ol><li><p><a id="color-state-(type=color):assert-3" href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>element</var>'s <code id="color-state-(type=color):attr-input-colorspace-3"><a href=#attr-input-colorspace>colorspace</a></code> attribute is in the <a href=#attr-input-colorspace-display-p3-state id="color-state-(type=color):attr-input-colorspace-display-p3-state">Display P3</a> state.<li><p>Set <var>color</var> to <var>color</var> <a href=https://drafts.csswg.org/css-color/#color-conversion id="color-state-(type=color):converting-colors-2" data-x-internal=converting-colors>converted</a> to the <a id="color-state-(type=color):'display-p3'-2" href=https://drafts.csswg.org/css-color/#valdef-color-display-p3 data-x-internal="'display-p3'">'display-p3'</a> color space.</ol>
   <li><p>Return the result of <a href=https://drafts.csswg.org/css-color/#serializing-color-values id="color-state-(type=color):serialisation-of-a-color" data-x-internal=serialisation-of-a-color>serializing</a>
   <var>color</var>. If <var>htmlCompatible</var> is true, then do so with <a href=https://drafts.csswg.org/css-color/#color-serialization-html-compatible-serialization-is-requested id="color-state-(type=color):html-compatible-serialization-is-requested" data-x-internal=html-compatible-serialization-is-requested>HTML-compatible serialization
   requested</a>.</ol>

  

  <div class=bookkeeping>

   <p>The following common <code id="color-state-(type=color):the-input-element-5"><a href=#the-input-element>input</a></code> element content attributes and IDL attributes <a href=#concept-input-apply id="color-state-(type=color):concept-input-apply">apply</a> to the element:
   <code id="color-state-(type=color):attr-input-alpha-4"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="color-state-(type=color):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="color-state-(type=color):attr-input-colorspace-4"><a href=#attr-input-colorspace>colorspace</a></code>, and
   <code id="color-state-(type=color):attr-input-list"><a href=#attr-input-list>list</a></code> content attributes;
   <code id="color-state-(type=color):dom-input-list"><a href=#dom-input-list>list</a></code> and
   <code id="color-state-(type=color):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attributes;
   <code id="color-state-(type=color):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code> method.</p>

   <p>The <code id="color-state-(type=color):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <a href=#dom-input-value-value id="color-state-(type=color):dom-input-value-value">value</a>.</p>

   <p>The <code id="color-state-(type=color):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="color-state-(type=color):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="color-state-(type=color):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="color-state-(type=color):do-not-apply">do not apply</a> to the
   element:
   <code id="color-state-(type=color):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="color-state-(type=color):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="color-state-(type=color):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="color-state-(type=color):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="color-state-(type=color):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="color-state-(type=color):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="color-state-(type=color):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="color-state-(type=color):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="color-state-(type=color):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="color-state-(type=color):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="color-state-(type=color):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="color-state-(type=color):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="color-state-(type=color):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="color-state-(type=color):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="color-state-(type=color):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="color-state-(type=color):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="color-state-(type=color):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="color-state-(type=color):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="color-state-(type=color):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="color-state-(type=color):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="color-state-(type=color):attr-input-required"><a href=#attr-input-required>required</a></code>,
   <code id="color-state-(type=color):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="color-state-(type=color):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="color-state-(type=color):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="color-state-(type=color):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="color-state-(type=color):do-not-apply-2">do not apply</a> to the element:
   <code id="color-state-(type=color):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="color-state-(type=color):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="color-state-(type=color):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="color-state-(type=color):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="color-state-(type=color):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="color-state-(type=color):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code> and,
   <code id="color-state-(type=color):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="color-state-(type=color):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="color-state-(type=color):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="color-state-(type=color):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="color-state-(type=color):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>


  <h6 id="checkbox-state-(type=checkbox)"><span class=secno>4.10.5.1.15</span> <dfn data-dfn-for=input data-dfn-type=element-state>Checkbox</dfn> state (<code>type=checkbox</code>)<a href="#checkbox-state-(type=checkbox)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox title="<input> elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form. The exact appearance depends upon the operating system configuration under which the browser is running. Generally this is a square but it may have rounded corners. A checkbox allows you to select single values for submission in a form (or not).">Element/input/checkbox</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>When an <code id="checkbox-state-(type=checkbox):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="checkbox-state-(type=checkbox):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#checkbox-state-(type=checkbox)" id="checkbox-state-(type=checkbox):checkbox-state-(type=checkbox)">Checkbox</a> state, the rules in this section
  apply.</p>

  

  <p>The <code id="checkbox-state-(type=checkbox):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="checkbox-state-(type=checkbox):represents" href=dom.html#represents>represents</a> a two-state control that represents the
  element's <a href=form-control-infrastructure.html#concept-fe-checked id="checkbox-state-(type=checkbox):concept-fe-checked">checkedness</a> state. If the element's <a href=form-control-infrastructure.html#concept-fe-checked id="checkbox-state-(type=checkbox):concept-fe-checked-2">checkedness</a> state is true, the control represents a positive
  selection, and if it is false, a negative selection. If the element's <code id="checkbox-state-(type=checkbox):dom-input-indeterminate"><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute is set to true, then the
  control's selection should be obscured as if the control was in a third, indeterminate, state.</p>

  <p class=note>The control is never a true tri-state control, even if the element's <code id="checkbox-state-(type=checkbox):dom-input-indeterminate-2"><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute is set to true. The <code id="checkbox-state-(type=checkbox):dom-input-indeterminate-3"><a href=#dom-input-indeterminate>indeterminate</a></code> IDL attribute only gives the appearance of a
  third state.</p>

  

  <p>The <a href=#input-activation-behavior id="checkbox-state-(type=checkbox):input-activation-behavior">input activation behavior</a> is to run the following steps:</p>
  <ol><li><p>If the element is not <a id="checkbox-state-(type=checkbox):connected" href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a>, then return.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id="checkbox-state-(type=checkbox):concept-event-fire" data-x-internal=concept-event-fire>Fire an event</a> named <code id="checkbox-state-(type=checkbox):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> at the element with the <code id="checkbox-state-(type=checkbox):dom-event-bubbles"><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> and <code id="checkbox-state-(type=checkbox):dom-event-composed"><a data-x-internal=dom-event-composed href=https://dom.spec.whatwg.org/#dom-event-composed>composed</a></code>
   attributes initialized to true.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id="checkbox-state-(type=checkbox):concept-event-fire-2" data-x-internal=concept-event-fire>Fire an event</a> named <code id="checkbox-state-(type=checkbox):event-change"><a href=indices.html#event-change>change</a></code> at the element with the <code id="checkbox-state-(type=checkbox):dom-event-bubbles-2"><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> attribute initialized to true.</ol>
  

  <p><strong>Constraint validation</strong>: If the element is <i id="checkbox-state-(type=checkbox):concept-input-required"><a href=#concept-input-required>required</a></i> and its <a href=form-control-infrastructure.html#concept-fe-checked id="checkbox-state-(type=checkbox):concept-fe-checked-3">checkedness</a> is false, then the element is <a id="checkbox-state-(type=checkbox):suffering-from-being-missing" href=form-control-infrastructure.html#suffering-from-being-missing>suffering from
  being missing</a>.</p>

  

  <dl class=domintro><dt><code><var>input</var>.<a href=#dom-input-indeterminate id=dom-input-indeterminate-dev>indeterminate</a> [ = <var>value</var> ]</code><dd>
    <p>When set, overrides the rendering of <a href="#checkbox-state-(type=checkbox)" id="checkbox-state-(type=checkbox):checkbox-state-(type=checkbox)-2">checkbox</a>
    controls so that the current value is not visible.</p>
   </dl>

  <div class=bookkeeping>

   <p>The following common <code id="checkbox-state-(type=checkbox):the-input-element-3"><a href=#the-input-element>input</a></code> element content attributes and IDL attributes <a href=#concept-input-apply id="checkbox-state-(type=checkbox):concept-input-apply">apply</a> to the element:
   <code id="checkbox-state-(type=checkbox):attr-input-checked"><a href=#attr-input-checked>checked</a></code>, and
   <code id="checkbox-state-(type=checkbox):attr-input-required"><a href=#attr-input-required>required</a></code> content attributes;
   <code id="checkbox-state-(type=checkbox):dom-input-checked"><a href=#dom-input-checked>checked</a></code> and
   <code id="checkbox-state-(type=checkbox):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attributes.</p>

   <p>The <code id="checkbox-state-(type=checkbox):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <a href=#dom-input-value-default-on id="checkbox-state-(type=checkbox):dom-input-value-default-on">default/on</a>.</p>

   <p>The <code id="checkbox-state-(type=checkbox):event-input-2"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="checkbox-state-(type=checkbox):event-change-2"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="checkbox-state-(type=checkbox):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="checkbox-state-(type=checkbox):do-not-apply">do not apply</a> to the
   element:
   <code id="checkbox-state-(type=checkbox):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="checkbox-state-(type=checkbox):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="checkbox-state-(type=checkbox):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="checkbox-state-(type=checkbox):do-not-apply-2">do not apply</a> to the element:
   <code id="checkbox-state-(type=checkbox):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="checkbox-state-(type=checkbox):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="checkbox-state-(type=checkbox):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="checkbox-state-(type=checkbox):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="checkbox-state-(type=checkbox):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="checkbox-state-(type=checkbox):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="checkbox-state-(type=checkbox):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="checkbox-state-(type=checkbox):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="checkbox-state-(type=checkbox):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="checkbox-state-(type=checkbox):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="checkbox-state-(type=checkbox):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="checkbox-state-(type=checkbox):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>



  <h6 id="radio-button-state-(type=radio)"><span class=secno>4.10.5.1.16</span> <dfn data-dfn-for=input data-dfn-type=element-state>Radio Button</dfn> state (<code>type=radio</code>)<a href="#radio-button-state-(type=radio)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio title="<input> elements of type radio are generally used in radio groups—collections of radio buttons describing a set of related options.">Element/input/radio</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>When an <code id="radio-button-state-(type=radio):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="radio-button-state-(type=radio):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#radio-button-state-(type=radio)" id="radio-button-state-(type=radio):radio-button-state-(type=radio)">Radio Button</a> state, the rules in this section
  apply.</p>

  

  <p>The <code id="radio-button-state-(type=radio):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="radio-button-state-(type=radio):represents" href=dom.html#represents>represents</a> a control that, when used in conjunction
  with other <code id="radio-button-state-(type=radio):the-input-element-3"><a href=#the-input-element>input</a></code> elements, forms a <i id="radio-button-state-(type=radio):radio-button-group"><a href=#radio-button-group>radio button group</a></i> in which only one
  control can have its <a href=form-control-infrastructure.html#concept-fe-checked id="radio-button-state-(type=radio):concept-fe-checked">checkedness</a> state set to true. If
  the element's <a href=form-control-infrastructure.html#concept-fe-checked id="radio-button-state-(type=radio):concept-fe-checked-2">checkedness</a> state is true, the control
  represents the selected control in the group, and if it is false, it indicates a control in the
  group that is not selected.</p>

  <p>The <dfn id=radio-button-group><i>radio button group</i></dfn> that contains an <code id="radio-button-state-(type=radio):the-input-element-4"><a href=#the-input-element>input</a></code> element
  <var>a</var> also contains all the other <code id="radio-button-state-(type=radio):the-input-element-5"><a href=#the-input-element>input</a></code> elements <var>b</var> that fulfill all
  of the following conditions:</p>

  <ul><li>The <code id="radio-button-state-(type=radio):the-input-element-6"><a href=#the-input-element>input</a></code> element <var>b</var>'s <code id="radio-button-state-(type=radio):attr-input-type-2"><a href=#attr-input-type>type</a></code> attribute is in the <a href="#radio-button-state-(type=radio)" id="radio-button-state-(type=radio):radio-button-state-(type=radio)-2">Radio
   Button</a> state.<li>Either <var>a</var> and <var>b</var> have the same <a id="radio-button-state-(type=radio):form-owner" href=form-control-infrastructure.html#form-owner>form owner</a>,
   or they both have no <a id="radio-button-state-(type=radio):form-owner-2" href=form-control-infrastructure.html#form-owner>form owner</a>.<li>Both <var>a</var> and <var>b</var> are in the same <a id="radio-button-state-(type=radio):tree" href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a>.<li>They both have a <code id="radio-button-state-(type=radio):attr-fe-name"><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute, their <code id="radio-button-state-(type=radio):attr-fe-name-2"><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attributes are not empty, and the value of <var>a</var>'s <code id="radio-button-state-(type=radio):attr-fe-name-3"><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute equals the value of <var>b</var>'s <code id="radio-button-state-(type=radio):attr-fe-name-4"><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute.</ul>

  <p>A <a id="radio-button-state-(type=radio):tree-2" href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a> must not contain an <code id="radio-button-state-(type=radio):the-input-element-7"><a href=#the-input-element>input</a></code> element whose <i id="radio-button-state-(type=radio):radio-button-group-2"><a href=#radio-button-group>radio button group</a></i> contains only that element.</p>

  

  <p>When any of the following phenomena occur, if the element's <a href=form-control-infrastructure.html#concept-fe-checked id="radio-button-state-(type=radio):concept-fe-checked-3">checkedness</a> state is true after the occurrence, the <a href=form-control-infrastructure.html#concept-fe-checked id="radio-button-state-(type=radio):concept-fe-checked-4">checkedness</a> state of all the other elements in the same <i id="radio-button-state-(type=radio):radio-button-group-3"><a href=#radio-button-group>radio
  button group</a></i> must be set to false:</p>

  <ul><li>The element's <a href=form-control-infrastructure.html#concept-fe-checked id="radio-button-state-(type=radio):concept-fe-checked-5">checkedness</a> state is set to true (for
   whatever reason).<li>The element's <code id="radio-button-state-(type=radio):attr-fe-name-5"><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute is set, changed, or
   removed.<li>The element's <a id="radio-button-state-(type=radio):form-owner-3" href=form-control-infrastructure.html#form-owner>form owner</a> changes.<li><a href=#signal-a-type-change id="radio-button-state-(type=radio):signal-a-type-change">A type change is signalled</a> for the element.<li>The element <a id="radio-button-state-(type=radio):becomes-connected" href=infrastructure.html#becomes-connected>becomes connected</a>.</ul>

  <p>The <a href=#input-activation-behavior id="radio-button-state-(type=radio):input-activation-behavior">input activation behavior</a> is to run the following steps:</p>
  <ol><li><p>If the element is not <a id="radio-button-state-(type=radio):connected" href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a>, then return.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id="radio-button-state-(type=radio):concept-event-fire" data-x-internal=concept-event-fire>Fire an event</a> named <code id="radio-button-state-(type=radio):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> at the element with the <code id="radio-button-state-(type=radio):dom-event-bubbles"><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> and <code id="radio-button-state-(type=radio):dom-event-composed"><a data-x-internal=dom-event-composed href=https://dom.spec.whatwg.org/#dom-event-composed>composed</a></code>
   attributes initialized to true.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id="radio-button-state-(type=radio):concept-event-fire-2" data-x-internal=concept-event-fire>Fire an event</a> named <code id="radio-button-state-(type=radio):event-change"><a href=indices.html#event-change>change</a></code> at the element with the <code id="radio-button-state-(type=radio):dom-event-bubbles-2"><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> attribute initialized to true.</ol>
  

  <p><strong>Constraint validation</strong>: If an element in the <i id="radio-button-state-(type=radio):radio-button-group-4"><a href=#radio-button-group>radio button group</a></i> is <i id="radio-button-state-(type=radio):concept-input-required"><a href=#concept-input-required>required</a></i>, and all of the
  <code id="radio-button-state-(type=radio):the-input-element-8"><a href=#the-input-element>input</a></code> elements in the <i id="radio-button-state-(type=radio):radio-button-group-5"><a href=#radio-button-group>radio button group</a></i> have a
  <a href=form-control-infrastructure.html#concept-fe-checked id="radio-button-state-(type=radio):concept-fe-checked-6">checkedness</a> that is false, then the element is
  <a id="radio-button-state-(type=radio):suffering-from-being-missing" href=form-control-infrastructure.html#suffering-from-being-missing>suffering from being missing</a>.</p>

  <div class=example>
   <p>The following example, for some reason, has specified that puppers are both <a href=#concept-input-required id="radio-button-state-(type=radio):concept-input-required-2">required</a> and <a href=form-control-infrastructure.html#concept-fe-disabled id="radio-button-state-(type=radio):concept-fe-disabled">disabled</a>:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;radio&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;dog-type&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;pupper&quot;</c-> <c- e>required</c-> <c- e>disabled</c-><c- p>&gt;</c-> Pupper<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;radio&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;dog-type&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;doggo&quot;</c-><c- p>&gt;</c-> Doggo<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>button</c-><c- p>&gt;</c->Make your choice<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

   <p>If the user tries to submit this form without first selecting "Doggo", then <em>both</em>
   <code id="radio-button-state-(type=radio):the-input-element-9"><a href=#the-input-element>input</a></code> elements will be <a id="radio-button-state-(type=radio):suffering-from-being-missing-2" href=form-control-infrastructure.html#suffering-from-being-missing>suffering from being missing</a>, since an element
   in the <a href=#radio-button-group id="radio-button-state-(type=radio):radio-button-group-6">radio button group</a> is <a href=#concept-input-required id="radio-button-state-(type=radio):concept-input-required-3">required</a>
   (viz. the first element), and both of the elements in the radio button group have a false <a href=form-control-infrastructure.html#concept-fe-checked id="radio-button-state-(type=radio):concept-fe-checked-7">checkedness</a>.</p>

   <p>On the other hand, if the user selects "Doggo" and then submits the form, then neither
   <code id="radio-button-state-(type=radio):the-input-element-10"><a href=#the-input-element>input</a></code> element will be <a id="radio-button-state-(type=radio):suffering-from-being-missing-3" href=form-control-infrastructure.html#suffering-from-being-missing>suffering from being missing</a>, since while one of
   them is <a href=#concept-input-required id="radio-button-state-(type=radio):concept-input-required-4">required</a>, not all of them have a false <a href=form-control-infrastructure.html#concept-fe-checked id="radio-button-state-(type=radio):concept-fe-checked-8">checkedness</a>.</p>
  </div>

  

  <p class=note>If none of the radio buttons in a <a href=#radio-button-group id="radio-button-state-(type=radio):radio-button-group-7">radio button group</a> are checked,
  then they will all be initially unchecked in the interface, until such time as one of them is
  checked (either by the user or by script).</p>

  <div class=bookkeeping>

   <p>The following common <code id="radio-button-state-(type=radio):the-input-element-11"><a href=#the-input-element>input</a></code> element content attributes and IDL attributes <a href=#concept-input-apply id="radio-button-state-(type=radio):concept-input-apply">apply</a> to the element:
   <code id="radio-button-state-(type=radio):attr-input-checked"><a href=#attr-input-checked>checked</a></code> and
   <code id="radio-button-state-(type=radio):attr-input-required"><a href=#attr-input-required>required</a></code> content attributes;
   <code id="radio-button-state-(type=radio):dom-input-checked"><a href=#dom-input-checked>checked</a></code> and
   <code id="radio-button-state-(type=radio):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attributes.</p>

   <p>The <code id="radio-button-state-(type=radio):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <a href=#dom-input-value-default-on id="radio-button-state-(type=radio):dom-input-value-default-on">default/on</a>.</p>

   <p>The <code id="radio-button-state-(type=radio):event-input-2"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="radio-button-state-(type=radio):event-change-2"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="radio-button-state-(type=radio):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="radio-button-state-(type=radio):do-not-apply">do not apply</a> to the
   element:
   <code id="radio-button-state-(type=radio):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="radio-button-state-(type=radio):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="radio-button-state-(type=radio):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="radio-button-state-(type=radio):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="radio-button-state-(type=radio):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="radio-button-state-(type=radio):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="radio-button-state-(type=radio):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="radio-button-state-(type=radio):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="radio-button-state-(type=radio):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="radio-button-state-(type=radio):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="radio-button-state-(type=radio):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="radio-button-state-(type=radio):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="radio-button-state-(type=radio):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="radio-button-state-(type=radio):do-not-apply-2">do not apply</a> to the element:
   <code id="radio-button-state-(type=radio):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="radio-button-state-(type=radio):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="radio-button-state-(type=radio):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="radio-button-state-(type=radio):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="radio-button-state-(type=radio):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="radio-button-state-(type=radio):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="radio-button-state-(type=radio):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="radio-button-state-(type=radio):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="radio-button-state-(type=radio):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="radio-button-state-(type=radio):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="radio-button-state-(type=radio):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="radio-button-state-(type=radio):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>



  <h6 id="file-upload-state-(type=file)"><span class=secno>4.10.5.1.17</span> <dfn data-dfn-for=input data-dfn-type=element-state>File Upload</dfn> state (<code>type=file</code>)<a href="#file-upload-state-(type=file)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file title="<input> elements with type=&quot;file&quot; let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission, or manipulated using JavaScript code and the File API.">Element/input/file</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  

  

  <p>When an <code id="file-upload-state-(type=file):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="file-upload-state-(type=file):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#file-upload-state-(type=file)" id="file-upload-state-(type=file):file-upload-state-(type=file)">File Upload</a> state, the rules in this section
  apply.</p>

  

  <p>The <code id="file-upload-state-(type=file):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="file-upload-state-(type=file):represents" href=dom.html#represents>represents</a> a list of <dfn id=concept-input-type-file-selected>selected files</dfn>, each file consisting of a
  filename, a file type, and a file body (the contents of the file).</p>

  

  <p>Filenames must not contain <a href=#concept-input-file-path id="file-upload-state-(type=file):concept-input-file-path">path components</a>, even
  in the case that a user has selected an entire directory hierarchy or multiple files with the same
  name from different directories. <dfn id=concept-input-file-path>Path components</dfn>, for
  the purposes of the <a href="#file-upload-state-(type=file)" id="file-upload-state-(type=file):file-upload-state-(type=file)-2">File Upload</a> state, are those parts
  of filenames that are separated by U+005C REVERSE SOLIDUS character (\) characters.</p>

  <p>Unless the <code id="file-upload-state-(type=file):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code> attribute is set, there must be
  no more than one file in the list of <a href=#concept-input-type-file-selected id="file-upload-state-(type=file):concept-input-type-file-selected">selected
  files</a>.</p>

  <p>The <a href=#input-activation-behavior id="file-upload-state-(type=file):input-activation-behavior">input activation behavior</a> for such an element <var>element</var> is to
  <a href=#show-the-picker,-if-applicable id="file-upload-state-(type=file):show-the-picker,-if-applicable">show the picker, if applicable</a>, for <var>element</var>.</p>

  <p>If the element is <i id="file-upload-state-(type=file):concept-fe-mutable"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, the user agent should allow the
  user to change the files on the list in other ways also, e.g., adding or removing files by
  drag-and-drop. When the user does so, the user agent must <a href=#update-the-file-selection id="file-upload-state-(type=file):update-the-file-selection">update the file selection</a>
  for the element.</p>

  <p>If the element is not <i id="file-upload-state-(type=file):concept-fe-mutable-2"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, the user agent must not allow
  the user to change the element's selection.</p>

  <p>To <dfn id=update-the-file-selection>update the file selection</dfn> for an element <var>element</var>:</p>

  <ol><li>
    <p><a id="file-upload-state-(type=file):queue-an-element-task" href=webappapis.html#queue-an-element-task>Queue an element task</a> on the <a id="file-upload-state-(type=file):user-interaction-task-source" href=webappapis.html#user-interaction-task-source>user interaction task source</a> given
    <var>element</var> and the following steps:</p>

    <ol><li><p>Update <var>element</var>'s <a href=#concept-input-type-file-selected id="file-upload-state-(type=file):concept-input-type-file-selected-2">selected
     files</a> so that it represents the user's selection.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id="file-upload-state-(type=file):concept-event-fire" data-x-internal=concept-event-fire>Fire an event</a> named <code id="file-upload-state-(type=file):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> at the <code id="file-upload-state-(type=file):the-input-element-3"><a href=#the-input-element>input</a></code> element, with the <code id="file-upload-state-(type=file):dom-event-bubbles"><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> and <code id="file-upload-state-(type=file):dom-event-composed"><a data-x-internal=dom-event-composed href=https://dom.spec.whatwg.org/#dom-event-composed>composed</a></code>
     attributes initialized to true.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id="file-upload-state-(type=file):concept-event-fire-2" data-x-internal=concept-event-fire>Fire an event</a> named <code id="file-upload-state-(type=file):event-change"><a href=indices.html#event-change>change</a></code> at the <code id="file-upload-state-(type=file):the-input-element-4"><a href=#the-input-element>input</a></code> element, with the <code id="file-upload-state-(type=file):dom-event-bubbles-2"><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> attribute initialized to true.</ol>
   </ol>

  <p><strong>Constraint validation</strong>: If the element is <i id="file-upload-state-(type=file):concept-input-required"><a href=#concept-input-required>required</a></i> and the list of <a href=#concept-input-type-file-selected id="file-upload-state-(type=file):concept-input-type-file-selected-3">selected files</a> is empty, then the element is
  <a id="file-upload-state-(type=file):suffering-from-being-missing" href=form-control-infrastructure.html#suffering-from-being-missing>suffering from being missing</a>.</p>

  

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept title="The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow.">Attributes/accept</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#attr-accept</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>37+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>26+</span></span><hr><span class="opera yes"><span>Opera</span><span>15+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>37+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>11.3+</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>26+</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4+</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>1.5+</span></span><span class="opera_android yes"><span>Opera Android</span><span>15+</span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-accept data-dfn-type=element-attr><code>accept</code></dfn>
  attribute may be specified to provide user agents with a hint of what file types will be
  accepted.</p>

  <p>If specified, the attribute must consist of a <a id="file-upload-state-(type=file):set-of-comma-separated-tokens" href=common-microsyntaxes.html#set-of-comma-separated-tokens>set of comma-separated tokens</a>, each
  of which must be an <a id="file-upload-state-(type=file):ascii-case-insensitive" href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the following:</p>

  <dl><dt>The string "<code>audio/*</code>"<dd>Indicates that sound files are accepted.<dt>The string "<code>video/*</code>"<dd>Indicates that video files are accepted.<dt>The string "<code>image/*</code>"<dd>Indicates that image files are accepted.<dt>A <a id="file-upload-state-(type=file):valid-mime-type-string-with-no-parameters" href=https://mimesniff.spec.whatwg.org/#valid-mime-type-with-no-parameters data-x-internal=valid-mime-type-string-with-no-parameters>valid MIME type string with no parameters</a><dd>Indicates that files of the specified type are accepted.<dt>A string whose first character is a U+002E FULL STOP character (.)<dd>Indicates that files with the specified file extension are accepted.</dl>

  <p>The tokens must not be <a id="file-upload-state-(type=file):ascii-case-insensitive-2" href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> matches for any of the other tokens
  (i.e. duplicates are not allowed). To obtain the list of tokens from the
  attribute, the user agent must <a href=https://infra.spec.whatwg.org/#split-on-commas id="file-upload-state-(type=file):split-a-string-on-commas" data-x-internal=split-a-string-on-commas>split the attribute value on
  commas</a>.</p>

  <p>User agents may use the value of this attribute to display a more appropriate user interface
  than a generic file picker. For instance, given the value <code>image/*</code>, a user
  agent could offer the user the option of using a local camera or selecting a photograph from their
  photo collection; given the value <code>audio/*</code>, a user agent could offer the user
  the option of recording a clip using a headset microphone.</p>

  

  <p>User agents should prevent the user from selecting files that are not accepted by one (or more)
  of these tokens.</p>

  

  <p class=note>Authors are encouraged to specify both any MIME types and any corresponding
  extensions when looking for data in a specific format.</p>

  <div class=example>

   <p>For example, consider an application that converts Microsoft Word documents to Open Document
   Format files. Since Microsoft Word documents are described with a wide variety of MIME types and
   extensions, the site can list several, as follows:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;file&quot;</c-> <c- e>accept</c-><c- o>=</c-><c- s>&quot;.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document&quot;</c-><c- p>&gt;</c-></code></pre>

   <p>On platforms that only use file extensions to describe file types, the extensions listed here
   can be used to filter the allowed documents, while the MIME types can be used with the system's
   type registration table (mapping MIME types to extensions used by the system), if any, to
   determine any other extensions to allow. Similarly, on a system that does not have filenames or
   extensions but labels documents with MIME types internally, the MIME types can be used to pick
   the allowed files, while the extensions can be used if the system has an extension registration
   table that maps known extensions to MIME types used by the system.</p>

  </div>

  <p class=warning>Extensions tend to be ambiguous (e.g. there are an untold number of formats
  that use the "<code>.dat</code>" extension, and users can typically quite easily rename
  their files to have a "<code>.doc</code>" extension even if they are not Microsoft Word
  documents), and MIME types tend to be unreliable (e.g. many formats have no formally registered
  types, and many formats are in practice labeled using a number of different MIME types). Authors
  are reminded that, as usual, data received from a client should be treated with caution, as it may
  not be in an expected format even if the user is not hostile and the user agent fully obeyed the
  <code id="file-upload-state-(type=file):attr-input-accept"><a href=#attr-input-accept>accept</a></code> attribute's requirements.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file title="<input> elements with type=&quot;file&quot; let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission, or manipulated using JavaScript code and the File API.">Element/input/file</a></div></div><div id=fakepath-srsly class=example><a href=#fakepath-srsly class=self-link></a>

   <p>For historical reasons, the <code id="file-upload-state-(type=file):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attribute prefixes
   the filename with the string "<code>C:\fakepath\</code>". Some legacy user agents
   actually included the full path (which was a security vulnerability). As a result of this,
   obtaining the filename from the <code id="file-upload-state-(type=file):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute in a
   backwards-compatible way is non-trivial. The following function extracts the filename in a
   suitably compatible manner:</p>

   <pre><code class='js'><c- a>function</c-> extractFilename<c- p>(</c->path<c- p>)</c-> <c- p>{</c->
  <c- k>if</c-> <c- p>(</c->path<c- p>.</c->substr<c- p>(</c-><c- mf>0</c-><c- p>,</c-> <c- mf>12</c-><c- p>)</c-> <c- o>==</c-> <c- u>&quot;C:\\fakepath\\&quot;</c-><c- p>)</c->
    <c- k>return</c-> path<c- p>.</c->substr<c- p>(</c-><c- mf>12</c-><c- p>);</c-> <c- c1>// modern browser</c->
  <c- a>var</c-> x<c- p>;</c->
  x <c- o>=</c-> path<c- p>.</c->lastIndexOf<c- p>(</c-><c- t>&apos;/&apos;</c-><c- p>);</c->
  <c- k>if</c-> <c- p>(</c->x <c- o>&gt;=</c-> <c- mf>0</c-><c- p>)</c-> <c- c1>// Unix-based path</c->
    <c- k>return</c-> path<c- p>.</c->substr<c- p>(</c->x<c- o>+</c-><c- mf>1</c-><c- p>);</c->
  x <c- o>=</c-> path<c- p>.</c->lastIndexOf<c- p>(</c-><c- t>&apos;\\&apos;</c-><c- p>);</c->
  <c- k>if</c-> <c- p>(</c->x <c- o>&gt;=</c-> <c- mf>0</c-><c- p>)</c-> <c- c1>// Windows-based path</c->
    <c- k>return</c-> path<c- p>.</c->substr<c- p>(</c->x<c- o>+</c-><c- mf>1</c-><c- p>);</c->
  <c- k>return</c-> path<c- p>;</c-> <c- c1>// just the filename</c->
<c- p>}</c-></code></pre>

   <p>This can be used as follows:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>file</c-> <c- e>name</c-><c- o>=</c-><c- s>image</c-> <c- e>onchange</c-><c- o>=</c-><c- s>&quot;updateFilename(this.value)&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The name of the file you picked is: <c- p>&lt;</c-><c- f>span</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;filename&quot;</c-><c- p>&gt;</c->(none)<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>function</c-> updateFilename<c- p>(</c->path<c- p>)</c-> <c- p>{</c->
   <c- a>var</c-> name <c- o>=</c-> extractFilename<c- p>(</c->path<c- p>);</c->
   document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;filename&apos;</c-><c- p>).</c->textContent <c- o>=</c-> name<c- p>;</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   

  </div>

  <hr>

  <div class=bookkeeping>

   <p>The following common <code id="file-upload-state-(type=file):the-input-element-5"><a href=#the-input-element>input</a></code> element content attributes and IDL attributes <a href=#concept-input-apply id="file-upload-state-(type=file):concept-input-apply">apply</a> to the element:
   <code id="file-upload-state-(type=file):attr-input-accept-2"><a href=#attr-input-accept>accept</a></code>,
   <code id="file-upload-state-(type=file):attr-input-multiple-2"><a href=#attr-input-multiple>multiple</a></code>, and
   <code id="file-upload-state-(type=file):attr-input-required"><a href=#attr-input-required>required</a></code> content attributes;
   <code id="file-upload-state-(type=file):dom-input-files"><a href=#dom-input-files>files</a></code> and
   <code id="file-upload-state-(type=file):dom-input-value-3"><a href=#dom-input-value>value</a></code> IDL attributes;
   <code id="file-upload-state-(type=file):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code> method.</p>

   <p>The <code id="file-upload-state-(type=file):dom-input-value-4"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <a href=#dom-input-value-filename id="file-upload-state-(type=file):dom-input-value-filename">filename</a>.</p>

   <p>The <code id="file-upload-state-(type=file):event-input-2"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="file-upload-state-(type=file):event-change-2"><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id="file-upload-state-(type=file):concept-input-apply-2">apply</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="file-upload-state-(type=file):do-not-apply">do not apply</a> to the
   element:
   <code id="file-upload-state-(type=file):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="file-upload-state-(type=file):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="file-upload-state-(type=file):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="file-upload-state-(type=file):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="file-upload-state-(type=file):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="file-upload-state-(type=file):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="file-upload-state-(type=file):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="file-upload-state-(type=file):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="file-upload-state-(type=file):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="file-upload-state-(type=file):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="file-upload-state-(type=file):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="file-upload-state-(type=file):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="file-upload-state-(type=file):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="file-upload-state-(type=file):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="file-upload-state-(type=file):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="file-upload-state-(type=file):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="file-upload-state-(type=file):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="file-upload-state-(type=file):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="file-upload-state-(type=file):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="file-upload-state-(type=file):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="file-upload-state-(type=file):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="file-upload-state-(type=file):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="file-upload-state-(type=file):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="file-upload-state-(type=file):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="file-upload-state-(type=file):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="file-upload-state-(type=file):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The element's <code id="file-upload-state-(type=file):attr-input-value"><a href=#attr-input-value>value</a></code> attribute must be omitted.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="file-upload-state-(type=file):do-not-apply-2">do not apply</a> to the element:
   <code id="file-upload-state-(type=file):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="file-upload-state-(type=file):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="file-upload-state-(type=file):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="file-upload-state-(type=file):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="file-upload-state-(type=file):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="file-upload-state-(type=file):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="file-upload-state-(type=file):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="file-upload-state-(type=file):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="file-upload-state-(type=file):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="file-upload-state-(type=file):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="file-upload-state-(type=file):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

  </div>



  <h6 id="submit-button-state-(type=submit)"><span class=secno>4.10.5.1.18</span> <dfn data-dfn-for=input data-dfn-type=element-state>Submit Button</dfn> state (<code>type=submit</code>)<a href="#submit-button-state-(type=submit)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit title="<input> elements of type submit are rendered as buttons. When the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server.">Element/input/submit</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>When an <code id="submit-button-state-(type=submit):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="submit-button-state-(type=submit):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#submit-button-state-(type=submit)" id="submit-button-state-(type=submit):submit-button-state-(type=submit)">Submit Button</a> state, the rules in this section
  apply.</p>

  

  <p>
  <a id="submit-button-state-(type=submit):tracking-vector" title="There is a tracking vector here." href=https://infra.spec.whatwg.org/#tracking-vector class=tracking-vector data-x-internal=tracking-vector><img width=46 alt="(This is a tracking vector.)" crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/tracking-vector.svg height=64></a>
  The <code id="submit-button-state-(type=submit):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="submit-button-state-(type=submit):represents" href=dom.html#represents>represents</a> a button that, when activated, submits the
  form. If the element has a <code id="submit-button-state-(type=submit):attr-input-value"><a href=#attr-input-value>value</a></code> attribute,
  the button's label must be the value of that attribute; otherwise, it must be an
  <a id="submit-button-state-(type=submit):implementation-defined" href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> string that means "Submit" or some such. The element is
  a <a href=forms.html#concept-button id="submit-button-state-(type=submit):concept-button">button</a>, specifically a <a href=forms.html#concept-submit-button id="submit-button-state-(type=submit):concept-submit-button">submit button</a>.</p>

  <p class=note>Since the default label is <a id="submit-button-state-(type=submit):implementation-defined-2" href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a>, and the width of
  the button typically depends on the button's label, the button's width can leak a few bits of
  fingerprintable information. These bits are likely to be strongly correlated to the identity of
  the user agent and the user's locale.</p>

  

  <p>The element's <a href=form-control-infrastructure.html#concept-fe-optional-value id="submit-button-state-(type=submit):concept-fe-optional-value">optional value</a> is the value of
  the element's <code id="submit-button-state-(type=submit):attr-button-value"><a href=form-elements.html#attr-button-value>value</a></code> attribute, if there is one; otherwise
  null.</p>

  <p>The element's <a href=#input-activation-behavior id="submit-button-state-(type=submit):input-activation-behavior">input activation behavior</a> given <var>event</var> is as follows:</p>

  <ol><li><p>If the element does not have a <a id="submit-button-state-(type=submit):form-owner" href=form-control-infrastructure.html#form-owner>form owner</a>, then return.<li><p>If the element's <a id="submit-button-state-(type=submit):node-document" href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is not <a id="submit-button-state-(type=submit):fully-active" href=document-sequences.html#fully-active>fully active</a>, then
   return.<li><p><a href=form-control-infrastructure.html#concept-form-submit id="submit-button-state-(type=submit):concept-form-submit">Submit</a> the element's <a id="submit-button-state-(type=submit):form-owner-2" href=form-control-infrastructure.html#form-owner>form owner</a>
   from the element with <i id="submit-button-state-(type=submit):submit-user-involvement"><a href=form-control-infrastructure.html#submit-user-involvement>userInvolvement</a></i> set to
   <var>event</var>'s <a href=browsing-the-web.html#event-uni id="submit-button-state-(type=submit):event-uni">user navigation involvement</a>.</p>
  </ol>

  

  <p>The <code id="submit-button-state-(type=submit):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>, <code id="submit-button-state-(type=submit):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>, <code id="submit-button-state-(type=submit):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>, <code id="submit-button-state-(type=submit):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>, and <code id="submit-button-state-(type=submit):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code> attributes are <a id="submit-button-state-(type=submit):attributes-for-form-submission" href=form-control-infrastructure.html#attributes-for-form-submission>attributes for form
  submission</a>.</p>

  <p class=note>The <code id="submit-button-state-(type=submit):attr-fs-formnovalidate-2"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code> attribute can be
  used to make submit buttons that do not trigger the constraint validation.</p>

  <div class=bookkeeping>

   <p>The following common <code id="submit-button-state-(type=submit):the-input-element-3"><a href=#the-input-element>input</a></code> element content attributes and IDL attributes <a href=#concept-input-apply id="submit-button-state-(type=submit):concept-input-apply">apply</a> to the element:
   <code id="submit-button-state-(type=submit):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="submit-button-state-(type=submit):attr-fs-formaction-2"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="submit-button-state-(type=submit):attr-fs-formenctype-2"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="submit-button-state-(type=submit):attr-fs-formmethod-2"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="submit-button-state-(type=submit):attr-fs-formnovalidate-3"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="submit-button-state-(type=submit):attr-fs-formtarget-2"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="submit-button-state-(type=submit):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>, and
   <code id="submit-button-state-(type=submit):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code> content
   attributes; <code id="submit-button-state-(type=submit):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attribute.</p>

   <p>The <code id="submit-button-state-(type=submit):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <a href=#dom-input-value-default id="submit-button-state-(type=submit):dom-input-value-default">default</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="submit-button-state-(type=submit):do-not-apply">do not apply</a> to the
   element:
   <code id="submit-button-state-(type=submit):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="submit-button-state-(type=submit):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="submit-button-state-(type=submit):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-required"><a href=#attr-input-required>required</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="submit-button-state-(type=submit):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="submit-button-state-(type=submit):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="submit-button-state-(type=submit):do-not-apply-2">do not apply</a> to the element:
   <code id="submit-button-state-(type=submit):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="submit-button-state-(type=submit):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="submit-button-state-(type=submit):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="submit-button-state-(type=submit):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="submit-button-state-(type=submit):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="submit-button-state-(type=submit):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="submit-button-state-(type=submit):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="submit-button-state-(type=submit):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="submit-button-state-(type=submit):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="submit-button-state-(type=submit):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="submit-button-state-(type=submit):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="submit-button-state-(type=submit):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="submit-button-state-(type=submit):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="submit-button-state-(type=submit):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="submit-button-state-(type=submit):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#do-not-apply id="submit-button-state-(type=submit):do-not-apply-3">do not apply</a>.</p>

  </div>


  <h6 id="image-button-state-(type=image)"><span class=secno>4.10.5.1.19</span> <dfn data-dfn-for=input data-dfn-type=element-state>Image Button</dfn> state (<code>type=image</code>)<a href="#image-button-state-(type=image)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image title="<input> elements of type image are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.">Element/input/image</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>When an <code id="image-button-state-(type=image):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="image-button-state-(type=image):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#image-button-state-(type=image)" id="image-button-state-(type=image):image-button-state-(type=image)">Image Button</a> state, the rules in this section
  apply.</p>

  

  <p>The <code id="image-button-state-(type=image):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="image-button-state-(type=image):represents" href=dom.html#represents>represents</a> either an image from which a user can
  select a coordinate and submit the form, or alternatively a button from which the user can submit
  the form. The element is a <a href=forms.html#concept-button id="image-button-state-(type=image):concept-button">button</a>, specifically a <a href=forms.html#concept-submit-button id="image-button-state-(type=image):concept-submit-button">submit button</a>.</p>

  <p class=note>The coordinate is sent to the server <a href=form-control-infrastructure.html#constructing-the-form-data-set id="image-button-state-(type=image):constructing-the-form-data-set">during form submission</a> by sending two entries for the element, derived from the name
  of the control but with "<code>.x</code>" and "<code>.y</code>" appended to
  the name with the <var>x</var> and <var>y</var> components of the coordinate respectively.</p>

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#src title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#src</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The image is given by the <dfn data-dfn-for=input id=attr-input-src data-dfn-type=element-attr><code>src</code></dfn> attribute. The <code id="image-button-state-(type=image):attr-input-src"><a href=#attr-input-src>src</a></code>
  attribute must be present, and must contain a <a id="image-button-state-(type=image):valid-non-empty-url-potentially-surrounded-by-spaces" href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
  spaces</a> referencing a non-interactive, optionally animated, image resource that is neither
  paged nor scripted.</p>

  

  <p>When any of these events occur:

  <ul><li>the <code id="image-button-state-(type=image):the-input-element-3"><a href=#the-input-element>input</a></code> element's <code id="image-button-state-(type=image):attr-input-type-2"><a href=#attr-input-type>type</a></code> attribute is
   first set to the <a href="#image-button-state-(type=image)" id="image-button-state-(type=image):image-button-state-(type=image)-2">Image Button</a> state (possibly when
   the element is first created), and the <code id="image-button-state-(type=image):attr-input-src-2"><a href=#attr-input-src>src</a></code> attribute is
   present<li>the <code id="image-button-state-(type=image):the-input-element-4"><a href=#the-input-element>input</a></code> element's <code id="image-button-state-(type=image):attr-input-type-3"><a href=#attr-input-type>type</a></code> attribute is
   changed back to the <a href="#image-button-state-(type=image)" id="image-button-state-(type=image):image-button-state-(type=image)-3">Image Button</a> state, and the <code id="image-button-state-(type=image):attr-input-src-3"><a href=#attr-input-src>src</a></code> attribute is present, and its value has changed since the last
   time the <code id="image-button-state-(type=image):attr-input-type-4"><a href=#attr-input-type>type</a></code> attribute was in the <a href="#image-button-state-(type=image)" id="image-button-state-(type=image):image-button-state-(type=image)-4">Image Button</a> state<li>the <code id="image-button-state-(type=image):the-input-element-5"><a href=#the-input-element>input</a></code> element's <code id="image-button-state-(type=image):attr-input-type-5"><a href=#attr-input-type>type</a></code> attribute is in
   the <a href="#image-button-state-(type=image)" id="image-button-state-(type=image):image-button-state-(type=image)-5">Image Button</a> state, and the <code id="image-button-state-(type=image):attr-input-src-4"><a href=#attr-input-src>src</a></code> attribute is set or changed</ul> 

  <p>then unless the user agent cannot support images, or its support for images has been disabled,
  or the user agent only fetches images on demand, or the <code id="image-button-state-(type=image):attr-input-src-5"><a href=#attr-input-src>src</a></code>
  attribute's value is the empty string, run these steps:

  <ol><li><p>Let <var>url</var> be the result of <a id="image-button-state-(type=image):encoding-parsing-a-url" href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given the <code id="image-button-state-(type=image):attr-input-src-6"><a href=#attr-input-src>src</a></code> attribute's value, relative to the element's <a id="image-button-state-(type=image):node-document" href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
   document</a>.<li><p>If <var>url</var> is failure, then return.<li><p>Let <var>request</var> be a new <a href=https://fetch.spec.whatwg.org/#concept-request id="image-button-state-(type=image):concept-request" data-x-internal=concept-request>request</a> whose <a href=https://fetch.spec.whatwg.org/#concept-request-url id="image-button-state-(type=image):concept-request-url" data-x-internal=concept-request-url>URL</a> is <var>url</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-client id="image-button-state-(type=image):concept-request-client" data-x-internal=concept-request-client>client</a> is the element's <a id="image-button-state-(type=image):node-document-2" href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s
   <a id="image-button-state-(type=image):relevant-settings-object" href=webappapis.html#relevant-settings-object>relevant settings object</a>, <a href=https://fetch.spec.whatwg.org/#concept-request-destination id="image-button-state-(type=image):concept-request-destination" data-x-internal=concept-request-destination>destination</a> is "<code>image</code>", <a href=https://fetch.spec.whatwg.org/#request-initiator-type id="image-button-state-(type=image):concept-request-initiator-type" data-x-internal=concept-request-initiator-type>initiator type</a> is "<code>input</code>",
   <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id="image-button-state-(type=image):concept-request-credentials-mode" data-x-internal=concept-request-credentials-mode>credentials mode</a> is "<code>include</code>", and whose <a id="image-button-state-(type=image):use-url-credentials-flag" href=https://fetch.spec.whatwg.org/#concept-request-use-url-credentials-flag data-x-internal=use-url-credentials-flag>use-URL-credentials flag</a> is set.<li>
    <p><a href=https://fetch.spec.whatwg.org/#concept-fetch id="image-button-state-(type=image):concept-fetch" data-x-internal=concept-fetch>Fetch</a> <var>request</var>, with
    <i id="image-button-state-(type=image):processresponseendofbody"><a data-x-internal=processresponseendofbody href=https://fetch.spec.whatwg.org/#fetch-processresponseendofbody>processResponseEndOfBody</a></i> set to the following steps
    given <a href=https://fetch.spec.whatwg.org/#concept-response id="image-button-state-(type=image):concept-response" data-x-internal=concept-response>response</a> <var>response</var>:</p>

    <ol><li><p>If the download was successful and the image is <i id="image-button-state-(type=image):input-img-available"><a href=#input-img-available>available</a></i>, <a id="image-button-state-(type=image):queue-an-element-task" href=webappapis.html#queue-an-element-task>queue an element task</a> on the
      <a id="image-button-state-(type=image):user-interaction-task-source" href=webappapis.html#user-interaction-task-source>user interaction task source</a> given the <code id="image-button-state-(type=image):the-input-element-6"><a href=#the-input-element>input</a></code> element to <a href=https://dom.spec.whatwg.org/#concept-event-fire id="image-button-state-(type=image):concept-event-fire" data-x-internal=concept-event-fire>fire an event</a> named <code id="image-button-state-(type=image):event-load"><a href=indices.html#event-load>load</a></code>
      at the <code id="image-button-state-(type=image):the-input-element-7"><a href=#the-input-element>input</a></code> element.<li><p>Otherwise, if the fetching process fails without a response from the remote server, or
      completes but the image is not a valid or supported image, then <a id="image-button-state-(type=image):queue-an-element-task-2" href=webappapis.html#queue-an-element-task>queue an element
      task</a> on the <a id="image-button-state-(type=image):user-interaction-task-source-2" href=webappapis.html#user-interaction-task-source>user interaction task source</a> given the <code id="image-button-state-(type=image):the-input-element-8"><a href=#the-input-element>input</a></code>
      element to <a href=https://dom.spec.whatwg.org/#concept-event-fire id="image-button-state-(type=image):concept-event-fire-2" data-x-internal=concept-event-fire>fire an event</a> named <code id="image-button-state-(type=image):event-error"><a href=indices.html#event-error>error</a></code> on the <code id="image-button-state-(type=image):the-input-element-9"><a href=#the-input-element>input</a></code> element.</ol>
   </ol>

  
  <p>Fetching the image must <a id="image-button-state-(type=image):delay-the-load-event" href=parsing.html#delay-the-load-event>delay the load event</a> of the element's <a id="image-button-state-(type=image):node-document-3" href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> until the
  <a href=webappapis.html#concept-task id="image-button-state-(type=image):concept-task">task</a> that is <a href=webappapis.html#queue-a-task id="image-button-state-(type=image):queue-a-task">queued</a> by the
  <a id="image-button-state-(type=image):networking-task-source" href=webappapis.html#networking-task-source>networking task source</a> once the resource has been fetched (defined below) has been
  run.</p>

  <p>If the image was successfully obtained, with no network errors, and the image's type is a
  supported image type, and the image is a valid image of that type, then the image is said to be
  <dfn id=input-img-available><i>available</i></dfn>. If this is true before the image is
  completely downloaded, each <a href=webappapis.html#concept-task id="image-button-state-(type=image):concept-task-2">task</a> that is <a href=webappapis.html#queue-a-task id="image-button-state-(type=image):queue-a-task-2">queued</a> by the <a id="image-button-state-(type=image):networking-task-source-2" href=webappapis.html#networking-task-source>networking task source</a> while the image is being fetched
  must update the presentation of the image appropriately.</p>

  <p>The user agent should apply the <a href=https://mimesniff.spec.whatwg.org/#rules-for-sniffing-images-specifically id="image-button-state-(type=image):content-type-sniffing:-image" data-x-internal=content-type-sniffing:-image>image sniffing
  rules</a> to determine the type of the image, with the image's <a href=urls-and-fetching.html#content-type id="image-button-state-(type=image):content-type">associated Content-Type headers</a> giving the <var>official
  type</var>. If these rules are not applied, then the type of the image must be the type given by
  the image's <a href=urls-and-fetching.html#content-type id="image-button-state-(type=image):content-type-2">associated Content-Type headers</a>.</p>

  <p>User agents must not support non-image resources with the <code id="image-button-state-(type=image):the-input-element-10"><a href=#the-input-element>input</a></code> element. User
  agents must not run executable code embedded in the image resource. User agents must only display
  the first page of a multipage resource. User agents must not allow the resource to act in an
  interactive fashion, but should honor any animation in the resource.</p>
  <hr>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#alt title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#alt</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-alt data-dfn-type=element-attr><code>alt</code></dfn> attribute
  provides the textual label for the button for users and user agents who cannot use the image. The
  <code id="image-button-state-(type=image):attr-input-alt"><a href=#attr-input-alt>alt</a></code> attribute must be present, and must contain a non-empty
  string giving the label that would be appropriate for an equivalent button if the image was
  unavailable.</p>

  <p>The <code id="image-button-state-(type=image):the-input-element-11"><a href=#the-input-element>input</a></code> element supports <a id="image-button-state-(type=image):dimension-attributes" href=embedded-content-other.html#dimension-attributes>dimension attributes</a>.</p>

  <hr>

  <p>If the <code id="image-button-state-(type=image):attr-input-src-7"><a href=#attr-input-src>src</a></code> attribute is set, and the image is <i id="image-button-state-(type=image):input-img-available-2"><a href=#input-img-available>available</a></i> and the user agent is configured to display that image,
  then the element <a id="image-button-state-(type=image):represents-2" href=dom.html#represents>represents</a> a control for selecting a <a href=#concept-input-type-image-coordinate id="image-button-state-(type=image):concept-input-type-image-coordinate">coordinate</a> from the image specified by the
  <code id="image-button-state-(type=image):attr-input-src-8"><a href=#attr-input-src>src</a></code> attribute. In that case, if the element is <i id="image-button-state-(type=image):concept-fe-mutable"><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, the user agent should allow the user to select this <a href=#concept-input-type-image-coordinate id="image-button-state-(type=image):concept-input-type-image-coordinate-2">coordinate</a>.</p>

  <p>Otherwise, the element <a id="image-button-state-(type=image):represents-3" href=dom.html#represents>represents</a> a submit button whose label is given by the
  value of the <code id="image-button-state-(type=image):attr-input-alt-2"><a href=#attr-input-alt>alt</a></code> attribute.</p>

  

  <p>The element's <a href=#input-activation-behavior id="image-button-state-(type=image):input-activation-behavior">input activation behavior</a> given <var>event</var> is as follows:</p>

  <ol><li><p>If the element does not have a <a id="image-button-state-(type=image):form-owner" href=form-control-infrastructure.html#form-owner>form owner</a>, then return.<li><p>If the element's <a id="image-button-state-(type=image):node-document-4" href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is not <a id="image-button-state-(type=image):fully-active" href=document-sequences.html#fully-active>fully active</a>, then
   return.<li>
    <p>If the user activated the control while explicitly selecting a coordinate, then set the
    element's <a href=#concept-input-type-image-coordinate id="image-button-state-(type=image):concept-input-type-image-coordinate-3">selected coordinate</a> to that
    coordinate.</p>

    <p class=note>This is only possible under the conditions outlined above, when the element
    <a id="image-button-state-(type=image):represents-4" href=dom.html#represents>represents</a> a control for selecting such a coordinate. Even then, the user
    might activate the control without explicitly selecting a coordinate.</p>
   <li><p><a href=form-control-infrastructure.html#concept-form-submit id="image-button-state-(type=image):concept-form-submit">Submit</a> the element's <a id="image-button-state-(type=image):form-owner-2" href=form-control-infrastructure.html#form-owner>form owner</a>
   from the element with <i id="image-button-state-(type=image):submit-user-involvement"><a href=form-control-infrastructure.html#submit-user-involvement>userInvolvement</a></i> set to
   <var>event</var>'s <a href=browsing-the-web.html#event-uni id="image-button-state-(type=image):event-uni">user navigation involvement</a>.</ol>

  <p>The element's <dfn id=concept-input-type-image-coordinate>selected coordinate</dfn>
  consists of an <var>x</var>-component and a <var>y</var>-component. It is initially (0, 0). The
  coordinates represent the position relative to the edge of the element's image, with the
  coordinate space having the positive <var>x</var> direction to the right, and the positive
  <var>y</var> direction downwards.</p>

  <p>The <var>x</var>-component must be a <a id="image-button-state-(type=image):valid-integer" href=common-microsyntaxes.html#valid-integer>valid integer</a> representing a number
  <var>x</var> in the range <span>−(<var>border<sub>left</sub></var>+<var>padding<sub>left</sub></var>) ≤ <var>x</var> ≤ <var>width</var>+<var>border<sub>right</sub></var>+<var>padding<sub>right</sub></var></span>, where <var>width</var> is the rendered width of the image, <var>border<sub>left</sub></var> is the width of the border on the left of the image, <var>padding<sub>left</sub></var> is the width of the padding on the left of the
  image, <var>border<sub>right</sub></var> is the width of the border on the right
  of the image, and <var>padding<sub>right</sub></var> is the width of the padding
  on the right of the image, with all dimensions given in <a href=https://drafts.csswg.org/css-values/#px id="image-button-state-(type=image):'px'" data-x-internal="'px'">CSS pixels</a>.</p>

  <p>The <var>y</var>-component must be a <a id="image-button-state-(type=image):valid-integer-2" href=common-microsyntaxes.html#valid-integer>valid integer</a> representing a number
  <var>y</var> in the range <span>−(<var>border<sub>top</sub></var>+<var>padding<sub>top</sub></var>) ≤ <var>y</var> ≤ <var>height</var>+<var>border<sub>bottom</sub></var>+<var>padding<sub>bottom</sub></var></span>, where
  <var>height</var> is the rendered height of the image, <var>border<sub>top</sub></var> is the width of the border above the image, <var>padding<sub>top</sub></var> is the width of the padding above the image, <var>border<sub>bottom</sub></var> is the width of the border below the image, and <var>padding<sub>bottom</sub></var> is the width of the padding below the image, with
  all dimensions given in <a href=https://drafts.csswg.org/css-values/#px id="image-button-state-(type=image):'px'-2" data-x-internal="'px'">CSS pixels</a>.</p>

  <p>Where a border or padding is missing, its width is zero <a href=https://drafts.csswg.org/css-values/#px id="image-button-state-(type=image):'px'-3" data-x-internal="'px'">CSS
  pixels</a>.</p>

  <hr>

  

  <p>The <code id="image-button-state-(type=image):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>, <code id="image-button-state-(type=image):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>, <code id="image-button-state-(type=image):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>, <code id="image-button-state-(type=image):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>, and <code id="image-button-state-(type=image):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code> attributes are <a id="image-button-state-(type=image):attributes-for-form-submission" href=form-control-infrastructure.html#attributes-for-form-submission>attributes for form
  submission</a>.</p>

  <dl class=domintro><dt><code><var>image</var>.<a href=#dom-input-width id=dom-input-width-dev>width</a> [ = <var>value</var> ]</code><dt><code><var>image</var>.<a href=#dom-input-height id=dom-input-height-dev>height</a> [ = <var>value</var> ]</code><dd>
    <p>These attributes return the actual rendered dimensions of the image, or 0 if the dimensions
    are not known.</p>

    <p>They can be set, to change the corresponding content attributes.</p>
   </dl>

  <div class=bookkeeping>

   <p>The following common <code id="image-button-state-(type=image):the-input-element-12"><a href=#the-input-element>input</a></code> element content attributes and IDL attributes <a href=#concept-input-apply id="image-button-state-(type=image):concept-input-apply">apply</a> to the element:
   <code id="image-button-state-(type=image):attr-input-alt-3"><a href=#attr-input-alt>alt</a></code>,
   <code id="image-button-state-(type=image):attr-fs-formaction-2"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="image-button-state-(type=image):attr-fs-formenctype-2"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="image-button-state-(type=image):attr-fs-formmethod-2"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="image-button-state-(type=image):attr-fs-formnovalidate-2"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="image-button-state-(type=image):attr-fs-formtarget-2"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="image-button-state-(type=image):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="image-button-state-(type=image):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code>,
   <code id="image-button-state-(type=image):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>,
   <code id="image-button-state-(type=image):attr-input-src-9"><a href=#attr-input-src>src</a></code>, and
   <code id="image-button-state-(type=image):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code> content attributes;
   <code id="image-button-state-(type=image):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attribute.</p>

   <p>The <code id="image-button-state-(type=image):dom-input-value-2"><a href=#dom-input-value>value</a></code> IDL attribute is in mode <a href=#dom-input-value-default id="image-button-state-(type=image):dom-input-value-default">default</a>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="image-button-state-(type=image):do-not-apply">do not apply</a> to the
   element:
   <code id="image-button-state-(type=image):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="image-button-state-(type=image):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="image-button-state-(type=image):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="image-button-state-(type=image):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="image-button-state-(type=image):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="image-button-state-(type=image):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="image-button-state-(type=image):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="image-button-state-(type=image):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="image-button-state-(type=image):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="image-button-state-(type=image):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="image-button-state-(type=image):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="image-button-state-(type=image):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="image-button-state-(type=image):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="image-button-state-(type=image):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="image-button-state-(type=image):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="image-button-state-(type=image):attr-input-required"><a href=#attr-input-required>required</a></code>,
   <code id="image-button-state-(type=image):attr-input-size"><a href=#attr-input-size>size</a></code>, and
   <code id="image-button-state-(type=image):attr-input-step"><a href=#attr-input-step>step</a></code>.</p>

   <p>The element's <code id="image-button-state-(type=image):attr-input-value"><a href=#attr-input-value>value</a></code> attribute must be omitted.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="image-button-state-(type=image):do-not-apply-2">do not apply</a> to the element:
   <code id="image-button-state-(type=image):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="image-button-state-(type=image):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="image-button-state-(type=image):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="image-button-state-(type=image):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="image-button-state-(type=image):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="image-button-state-(type=image):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="image-button-state-(type=image):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="image-button-state-(type=image):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="image-button-state-(type=image):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="image-button-state-(type=image):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="image-button-state-(type=image):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="image-button-state-(type=image):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="image-button-state-(type=image):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="image-button-state-(type=image):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="image-button-state-(type=image):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#do-not-apply id="image-button-state-(type=image):do-not-apply-3">do not apply</a>.</p>

  </div>

  <p class=note>Many aspects of this state's behavior are similar to the behavior of the
  <code id="image-button-state-(type=image):the-img-element"><a href=embedded-content.html#the-img-element>img</a></code> element. Readers are encouraged to read that section, where many of the same
  requirements are described in more detail.</p>

  <div class=example>

   <p>Take the following form:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;process.cgi&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>image</c-> <c- e>src</c-><c- o>=</c-><c- s>map.png</c-> <c- e>name</c-><c- o>=</c-><c- s>where</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Show location list&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

   <p>If the user clicked on the image at coordinate (127,40) then the URL used to submit the form
   would be "<code>process.cgi?where.x=127&amp;where.y=40</code>".</p>

   <p>(In this example, it's assumed that for users who don't see the map, and who instead just see
   a button labeled "Show location list", clicking the button will cause the server to show a list
   of locations to pick from instead of the map.)</p>

  </div>



  <h6 id="reset-button-state-(type=reset)"><span class=secno>4.10.5.1.20</span> <dfn data-dfn-for=input data-dfn-type=element-state>Reset Button</dfn> state (<code>type=reset</code>)<a href="#reset-button-state-(type=reset)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset title="<input> elements of type reset are rendered as buttons, with a default click event handler that resets all inputs in the form to their initial values.">Element/input/reset</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>When an <code id="reset-button-state-(type=reset):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="reset-button-state-(type=reset):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#reset-button-state-(type=reset)" id="reset-button-state-(type=reset):reset-button-state-(type=reset)">Reset Button</a> state, the rules in this section
  apply.</p>

  

  <p>
  <a id="reset-button-state-(type=reset):tracking-vector" title="There is a tracking vector here." href=https://infra.spec.whatwg.org/#tracking-vector class=tracking-vector data-x-internal=tracking-vector><img width=46 alt="(This is a tracking vector.)" crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/tracking-vector.svg height=64></a>
  The <code id="reset-button-state-(type=reset):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="reset-button-state-(type=reset):represents" href=dom.html#represents>represents</a> a button that, when activated, resets the
  form. If the element has a <code id="reset-button-state-(type=reset):attr-input-value"><a href=#attr-input-value>value</a></code> attribute,
  the button's label must be the value of that attribute; otherwise, it must be an
  <a id="reset-button-state-(type=reset):implementation-defined" href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> string that means "Reset" or some such. The element is
  a <a href=forms.html#concept-button id="reset-button-state-(type=reset):concept-button">button</a>.</p>

  <p class=note>Since the default label is <a id="reset-button-state-(type=reset):implementation-defined-2" href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a>, and the width of
  the button typically depends on the button's label, the button's width can leak a few bits of
  fingerprintable information. These bits are likely to be strongly correlated to the identity of
  the user agent and the user's locale.</p>

  

  <p>The element's <a href=#input-activation-behavior id="reset-button-state-(type=reset):input-activation-behavior">input activation behavior</a> is as follows:</p>

  <ol><li><p>If the element does not have a <a id="reset-button-state-(type=reset):form-owner" href=form-control-infrastructure.html#form-owner>form owner</a>, then return.<li><p>If the element's <a id="reset-button-state-(type=reset):node-document" href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is not <a id="reset-button-state-(type=reset):fully-active" href=document-sequences.html#fully-active>fully active</a>, then
   return.<li><p><a href=form-control-infrastructure.html#concept-form-reset id="reset-button-state-(type=reset):concept-form-reset">Reset</a> the <a id="reset-button-state-(type=reset):form-owner-2" href=form-control-infrastructure.html#form-owner>form owner</a> from the
   element.</p>
  </ol>

  <p><strong>Constraint validation</strong>: The element is <a id="reset-button-state-(type=reset):barred-from-constraint-validation" href=form-control-infrastructure.html#barred-from-constraint-validation>barred from constraint
  validation</a>.</p>

  

  <div class=bookkeeping>

   <p>The <code id="reset-button-state-(type=reset):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attribute <a href=#concept-input-apply id="reset-button-state-(type=reset):concept-input-apply">applies</a> to this element and is in mode <a href=#dom-input-value-default id="reset-button-state-(type=reset):dom-input-value-default">default</a>.</p>

   <p>The following common <code id="reset-button-state-(type=reset):the-input-element-3"><a href=#the-input-element>input</a></code> element content attributes <a href=#concept-input-apply id="reset-button-state-(type=reset):concept-input-apply-2">apply</a> to the element:
   <code id="reset-button-state-(type=reset):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code> and
   <code id="reset-button-state-(type=reset):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="reset-button-state-(type=reset):do-not-apply">do not apply</a> to the
   element:
   <code id="reset-button-state-(type=reset):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="reset-button-state-(type=reset):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="reset-button-state-(type=reset):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="reset-button-state-(type=reset):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="reset-button-state-(type=reset):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="reset-button-state-(type=reset):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="reset-button-state-(type=reset):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="reset-button-state-(type=reset):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="reset-button-state-(type=reset):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-required"><a href=#attr-input-required>required</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="reset-button-state-(type=reset):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="reset-button-state-(type=reset):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="reset-button-state-(type=reset):do-not-apply-2">do not apply</a> to the element:
   <code id="reset-button-state-(type=reset):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="reset-button-state-(type=reset):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="reset-button-state-(type=reset):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="reset-button-state-(type=reset):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="reset-button-state-(type=reset):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="reset-button-state-(type=reset):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="reset-button-state-(type=reset):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="reset-button-state-(type=reset):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="reset-button-state-(type=reset):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="reset-button-state-(type=reset):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="reset-button-state-(type=reset):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="reset-button-state-(type=reset):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="reset-button-state-(type=reset):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="reset-button-state-(type=reset):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="reset-button-state-(type=reset):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#do-not-apply id="reset-button-state-(type=reset):do-not-apply-3">do not apply</a>.</p>

  </div>


  <h6 id="button-state-(type=button)"><span class=secno>4.10.5.1.21</span> <dfn data-dfn-for=input data-dfn-type=element-state>Button</dfn> state (<code>type=button</code>)<a href="#button-state-(type=button)" class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button title="<input> elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the click event).">Element/input/button</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  

  <p>When an <code id="button-state-(type=button):the-input-element"><a href=#the-input-element>input</a></code> element's <code id="button-state-(type=button):attr-input-type"><a href=#attr-input-type>type</a></code> attribute is in
  the <a href="#button-state-(type=button)" id="button-state-(type=button):button-state-(type=button)">Button</a> state, the rules in this section apply.</p>

  

  <p>The <code id="button-state-(type=button):the-input-element-2"><a href=#the-input-element>input</a></code> element <a id="button-state-(type=button):represents" href=dom.html#represents>represents</a> a button with no default behavior. A
  label for the button must be provided in the <code id="button-state-(type=button):attr-input-value"><a href=#attr-input-value>value</a></code>
  attribute, though it may be the empty string. If the element has a <code id="button-state-(type=button):attr-input-value-2"><a href=#attr-input-value>value</a></code> attribute, the button's label must be the value of that
  attribute; otherwise, it must be the empty string. The element is a <a href=forms.html#concept-button id="button-state-(type=button):concept-button">button</a>.</p>

  

  <p>The element has no <a href=#input-activation-behavior id="button-state-(type=button):input-activation-behavior">input activation behavior</a>.</p>

  <p><strong>Constraint validation</strong>: The element is <a id="button-state-(type=button):barred-from-constraint-validation" href=form-control-infrastructure.html#barred-from-constraint-validation>barred from constraint
  validation</a>.</p>

  

  <div class=bookkeeping>

   <p>The <code id="button-state-(type=button):dom-input-value"><a href=#dom-input-value>value</a></code> IDL attribute <a href=#concept-input-apply id="button-state-(type=button):concept-input-apply">applies</a> to this element and is in mode <a href=#dom-input-value-default id="button-state-(type=button):dom-input-value-default">default</a>.</p>

   <p>The following common <code id="button-state-(type=button):the-input-element-3"><a href=#the-input-element>input</a></code> element content attributes <a href=#concept-input-apply id="button-state-(type=button):concept-input-apply-2">apply</a> to the element:
   <code id="button-state-(type=button):attr-popovertarget"><a href=popover.html#attr-popovertarget>popovertarget</a></code> and
   <code id="button-state-(type=button):attr-popovertargetaction"><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code>.</p>

   <p>The following content attributes must not be specified and <a href=#do-not-apply id="button-state-(type=button):do-not-apply">do not apply</a> to the
   element:
   <code id="button-state-(type=button):attr-input-accept"><a href=#attr-input-accept>accept</a></code>,
   <code id="button-state-(type=button):attr-input-alpha"><a href=#attr-input-alpha>alpha</a></code>,
   <code id="button-state-(type=button):attr-input-alt"><a href=#attr-input-alt>alt</a></code>,
   <code id="button-state-(type=button):attr-fe-autocomplete"><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code>,
   <code id="button-state-(type=button):attr-input-checked"><a href=#attr-input-checked>checked</a></code>,
   <code id="button-state-(type=button):attr-input-colorspace"><a href=#attr-input-colorspace>colorspace</a></code>,
   <code id="button-state-(type=button):attr-fe-dirname"><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code>,
   <code id="button-state-(type=button):attr-fs-formaction"><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
   <code id="button-state-(type=button):attr-fs-formenctype"><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>,
   <code id="button-state-(type=button):attr-fs-formmethod"><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>,
   <code id="button-state-(type=button):attr-fs-formnovalidate"><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>,
   <code id="button-state-(type=button):attr-fs-formtarget"><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code>,
   <code id="button-state-(type=button):attr-dim-height"><a href=embedded-content-other.html#attr-dim-height>height</a></code>,
   <code id="button-state-(type=button):attr-input-list"><a href=#attr-input-list>list</a></code>,
   <code id="button-state-(type=button):attr-input-max"><a href=#attr-input-max>max</a></code>,
   <code id="button-state-(type=button):attr-input-maxlength"><a href=#attr-input-maxlength>maxlength</a></code>,
   <code id="button-state-(type=button):attr-input-min"><a href=#attr-input-min>min</a></code>,
   <code id="button-state-(type=button):attr-input-minlength"><a href=#attr-input-minlength>minlength</a></code>,
   <code id="button-state-(type=button):attr-input-multiple"><a href=#attr-input-multiple>multiple</a></code>,
   <code id="button-state-(type=button):attr-input-pattern"><a href=#attr-input-pattern>pattern</a></code>,
   <code id="button-state-(type=button):attr-input-placeholder"><a href=#attr-input-placeholder>placeholder</a></code>,
   <code id="button-state-(type=button):attr-input-readonly"><a href=#attr-input-readonly>readonly</a></code>,
   <code id="button-state-(type=button):attr-input-required"><a href=#attr-input-required>required</a></code>,
   <code id="button-state-(type=button):attr-input-size"><a href=#attr-input-size>size</a></code>,
   <code id="button-state-(type=button):attr-input-src"><a href=#attr-input-src>src</a></code>,
   <code id="button-state-(type=button):attr-input-step"><a href=#attr-input-step>step</a></code>, and
   <code id="button-state-(type=button):attr-dim-width"><a href=embedded-content-other.html#attr-dim-width>width</a></code>.</p>

   <p>The following IDL attributes and methods <a href=#do-not-apply id="button-state-(type=button):do-not-apply-2">do not apply</a> to the element:
   <code id="button-state-(type=button):dom-input-checked"><a href=#dom-input-checked>checked</a></code>,
   <code id="button-state-(type=button):dom-input-files"><a href=#dom-input-files>files</a></code>,
   <code id="button-state-(type=button):dom-input-list"><a href=#dom-input-list>list</a></code>,
   <code id="button-state-(type=button):dom-textarea/input-selectionstart"><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>,
   <code id="button-state-(type=button):dom-textarea/input-selectionend"><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>,
   <code id="button-state-(type=button):dom-textarea/input-selectiondirection"><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>,
   <code id="button-state-(type=button):dom-input-valueasdate"><a href=#dom-input-valueasdate>valueAsDate</a></code>, and
   <code id="button-state-(type=button):dom-input-valueasnumber"><a href=#dom-input-valueasnumber>valueAsNumber</a></code> IDL attributes;
   <code id="button-state-(type=button):dom-textarea/input-select"><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>,
   <code id="button-state-(type=button):dom-textarea/input-setrangetext"><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>,
   <code id="button-state-(type=button):dom-textarea/input-setselectionrange"><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code>,
   <code id="button-state-(type=button):dom-input-stepdown"><a href=#dom-input-stepdown>stepDown()</a></code>, and
   <code id="button-state-(type=button):dom-input-stepup"><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>

   <p>The <code id="button-state-(type=button):event-input"><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id="button-state-(type=button):event-change"><a href=indices.html#event-change>change</a></code> events <a href=#do-not-apply id="button-state-(type=button):do-not-apply-3">do not apply</a>.</p>

  </div>


  

  <h5 id=input-impl-notes><span class=secno>4.10.5.2</span> Implementation notes regarding localization of form controls<a href=#input-impl-notes class=self-link></a></h5>
  

  <p><i>This section is non-normative.</i></p>

  <p>The formats shown to the user in date, time, and number controls is independent of the format
  used for form submission.</p>

  <p>Browsers are encouraged to use user interfaces that present dates, times, and numbers according
  to the conventions of either the locale implied by the <code id=input-impl-notes:the-input-element><a href=#the-input-element>input</a></code> element's
  <a id=input-impl-notes:language href=dom.html#language>language</a> or the user's preferred locale. Using the page's locale will ensure
  consistency with page-provided data.

  <p class=example>For example, it would be confusing to users if an American English page claimed
  that a Cirque De Soleil show was going to be showing on 02/03, but their
  browser, configured to use the British English locale, only showed the date 03/02 in the ticket purchase date picker. Using the page's locale would at least ensure that the
  date was presented in the same format everywhere. (There's still a risk that the user would end up
  arriving a month late, of course, but there's only so much that can be done about such cultural
  differences...)</p>

  



  <h5 id=common-input-element-attributes><span class=secno>4.10.5.3</span> Common <code id=common-input-element-attributes:the-input-element><a href=#the-input-element>input</a></code> element attributes<a href=#common-input-element-attributes class=self-link></a></h5>

  

  <p>These attributes only <a href=#concept-input-apply id=common-input-element-attributes:concept-input-apply>apply</a> to an <code id=common-input-element-attributes:the-input-element-2><a href=#the-input-element>input</a></code>
  element if its <code id=common-input-element-attributes:attr-input-type><a href=#attr-input-type>type</a></code> attribute is in a state whose definition
  declares that the attribute <a href=#concept-input-apply id=common-input-element-attributes:concept-input-apply-2>applies</a>. When an attribute
  <a href=#do-not-apply id=common-input-element-attributes:do-not-apply>doesn't apply</a> to an <code id=common-input-element-attributes:the-input-element-3><a href=#the-input-element>input</a></code> element, user agents must
  <a id=common-input-element-attributes:ignore href=infrastructure.html#ignore>ignore</a> the attribute, regardless of the requirements and definitions below.</p>

  


  <h6 id=the-maxlength-and-minlength-attributes><span class=secno>4.10.5.3.1</span> The <code id=the-maxlength-and-minlength-attributes:attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code> and <code id=the-maxlength-and-minlength-attributes:attr-input-minlength><a href=#attr-input-minlength>minlength</a></code> attributes<a href=#the-maxlength-and-minlength-attributes class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength title="The maxlength attribute defines the maximum string length that the user can enter into an <input> or <textarea>. The attribute must have an integer value of 0 or higher.">Attributes/maxlength</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength title="The minlength attribute defines the minimum string length that the user can enter into an <input> or <textarea>. The attribute must have an integer value of 0 or higher.">Attributes/minlength</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>51+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>40+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength title="The maxlength attribute defines the maximum string length that the user can enter into an <input> or <textarea>. The attribute must have an integer value of 0 or higher.">Attributes/maxlength</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>5+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength title="The minlength attribute defines the minimum string length that the user can enter into an <input> or <textarea>. The attribute must have an integer value of 0 or higher.">Attributes/minlength</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>51+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>40+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-maxlength title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#attr-maxlength</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>15+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>5+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>9+</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>18+</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4+</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>1.5+</span></span><span class="opera_android yes"><span>Opera Android</span><span>15+</span></span><hr><span class=caniuse><span><a href="https://caniuse.com/#feat=maxlength" title="maxlength attribute for input and textarea elements">caniuse.com table</a></span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-maxlength data-dfn-type=element-attr><code>maxlength</code></dfn>
  attribute, when it <a href=#concept-input-apply id=the-maxlength-and-minlength-attributes:concept-input-apply>applies</a>, is a
  <a href=form-control-infrastructure.html#attr-fe-maxlength id=the-maxlength-and-minlength-attributes:attr-fe-maxlength>form control <code>maxlength</code>
  attribute</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-minlength title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#attr-minlength</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>51+</span></span><span class="safari yes"><span>Safari</span><span>10.1+</span></span><span class="chrome yes"><span>Chrome</span><span>40+</span></span><hr><span class="opera yes"><span>Opera</span><span>27+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>51+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>10.3+</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>40+</span></span><span class="webview_android yes"><span>WebView Android</span><span>40+</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>4.0+</span></span><span class="opera_android yes"><span>Opera Android</span><span>27+</span></span><hr><span class=caniuse><span><a href="https://caniuse.com/#feat=input-minlength" title="Minimum length attribute for input fields">caniuse.com table</a></span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-minlength data-dfn-type=element-attr><code>minlength</code></dfn>
  attribute, when it <a href=#concept-input-apply id=the-maxlength-and-minlength-attributes:concept-input-apply-2>applies</a>, is a
  <a href=form-control-infrastructure.html#attr-fe-minlength id=the-maxlength-and-minlength-attributes:attr-fe-minlength>form control <code>minlength</code>
  attribute</a>.</p>

  <p>If the <code id=the-maxlength-and-minlength-attributes:the-input-element><a href=#the-input-element>input</a></code> element has a <a id=the-maxlength-and-minlength-attributes:maximum-allowed-value-length href=form-control-infrastructure.html#maximum-allowed-value-length>maximum allowed value length</a>, then the
  <a id=the-maxlength-and-minlength-attributes:length href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the value of the element's <code id=the-maxlength-and-minlength-attributes:attr-input-value><a href=#attr-input-value>value</a></code>
  attribute must be less than or equal to the element's <a id=the-maxlength-and-minlength-attributes:maximum-allowed-value-length-2 href=form-control-infrastructure.html#maximum-allowed-value-length>maximum allowed value
  length</a>.</p>

  

  <div class=example>

   <p>The following extract shows how a messaging client's text entry could be arbitrarily
   restricted to a fixed number of characters, thus forcing any conversation through this medium to
   be terse and discouraging intelligent discourse.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->What are you doing? <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>status</c-> <c- e>maxlength</c-><c- o>=</c-><c- s>140</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>Here, a password is given a minimum length:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Username: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>u</c-> <c- e>required</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Password: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>p</c-> <c- e>required</c-> <c- e>minlength</c-><c- o>=</c-><c- s>12</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h6 id=the-size-attribute><span class=secno>4.10.5.3.2</span> The <code id=the-size-attribute:attr-input-size><a href=#attr-input-size>size</a></code> attribute<a href=#the-size-attribute class=self-link></a></h6>

  <p>The <dfn data-dfn-for=input id=attr-input-size data-dfn-type=element-attr><code>size</code></dfn> attribute
  gives the number of characters that, in a visual rendering, the user agent is to allow the user to
  see while editing the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-size-attribute:concept-fe-value>value</a>.</p>

  <p>The <code id=the-size-attribute:attr-input-size-2><a href=#attr-input-size>size</a></code> attribute, if specified, must have a value that
  is a <a id=the-size-attribute:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a> greater than zero.</p>

  

  <p>If the attribute is present, then its value must be parsed using the <a id=the-size-attribute:rules-for-parsing-non-negative-integers href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for parsing
  non-negative integers</a>, and if the result is a number greater than zero, then the user agent
  should ensure that at least that many characters are visible.</p>

  <p>The <code id=the-size-attribute:dom-input-size><a href=#dom-input-size>size</a></code> IDL attribute is <a id=the-size-attribute:limited-to-only-non-negative-numbers-greater-than-zero href=common-dom-interfaces.html#limited-to-only-non-negative-numbers-greater-than-zero>limited to only positive
  numbers</a> and has a <a id=the-size-attribute:default-value href=common-dom-interfaces.html#default-value>default value</a> of 20.</p>

  



  <h6 id=the-readonly-attribute><span class=secno>4.10.5.3.3</span> The <code id=the-readonly-attribute:attr-input-readonly><a href=#attr-input-readonly>readonly</a></code> attribute<a href=#the-readonly-attribute class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly title="The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control.">Attributes/readonly</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly title="The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control.">Attributes/readonly</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly title="The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control.">Attributes/readonly</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>≤4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>≤12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>≤6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>≤12.1+</span></span></div></div></div>

  <p>The <dfn data-dfn-for=input id=attr-input-readonly data-dfn-type=element-attr><code>readonly</code></dfn>
  attribute is a <a id=the-readonly-attribute:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a> that controls whether or not the user can edit the
  form control. When specified, the element is not <i id=the-readonly-attribute:concept-fe-mutable><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>.</p>

  

  <p><strong>Constraint validation</strong>: If the <code id=the-readonly-attribute:attr-input-readonly-2><a href=#attr-input-readonly>readonly</a></code> attribute is specified on an <code id=the-readonly-attribute:the-input-element><a href=#the-input-element>input</a></code>
  element, the element is <a id=the-readonly-attribute:barred-from-constraint-validation href=form-control-infrastructure.html#barred-from-constraint-validation>barred from constraint validation</a>.</p>

  

  <div class=note>
   <p>The difference between <code id=the-readonly-attribute:attr-fe-disabled><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> and <code id=the-readonly-attribute:attr-input-readonly-3><a href=#attr-input-readonly>readonly</a></code> is that read-only controls can still function,
   whereas disabled controls generally do not function as controls until they are enabled. This is
   spelled out in more detail elsewhere in this specification with normative requirements that refer
   to the <a href=form-control-infrastructure.html#concept-fe-disabled id=the-readonly-attribute:concept-fe-disabled>disabled</a> concept (for example, the element's
   <a id=the-readonly-attribute:activation-behaviour href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation behavior</a>, whether or not it is a <a id=the-readonly-attribute:focusable-area href=interaction.html#focusable-area>focusable area</a>, or when
   <a id=the-readonly-attribute:constructing-the-form-data-set href=form-control-infrastructure.html#constructing-the-form-data-set>constructing the entry list</a>). Any other behavior related to user interaction with
   disabled controls, such as whether text can be selected or copied, is not defined in this
   standard.</p>

   <p>Only text controls can be made read-only, since for other controls (such as checkboxes and
   buttons) there is no useful distinction between being read-only and being disabled, so the
   <code id=the-readonly-attribute:attr-input-readonly-4><a href=#attr-input-readonly>readonly</a></code> attribute <a href=#do-not-apply id=the-readonly-attribute:do-not-apply>does not
   apply</a>.</p>
  </div>

  <div class=example>

   <p>In the following example, the existing product identifiers cannot be modified, but they are
   still displayed as part of the form, for consistency with the row representing a new product
   (where the identifier is not yet filled in).</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;products.cgi&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;post&quot;</c-> <c- e>enctype</c-><c- o>=</c-><c- s>&quot;multipart/form-data&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Product ID <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Product name <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Price <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c-> Action
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>readonly</c-><c- o>=</c-><c- s>&quot;readonly&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;1.pid&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;H412&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-><c- o>=</c-><c- s>&quot;required&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;1.pname&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Floor lamp Ulke&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> $<c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-><c- o>=</c-><c- s>&quot;required&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;number&quot;</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;0&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;0.01&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;1.pprice&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;49.99&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>button</c-> <c- e>formnovalidate</c-><c- o>=</c-><c- s>&quot;formnovalidate&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;action&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;delete:1&quot;</c-><c- p>&gt;</c->Delete<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>readonly</c-><c- o>=</c-><c- s>&quot;readonly&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;2.pid&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;FG28&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-><c- o>=</c-><c- s>&quot;required&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;2.pname&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Table lamp Ulke&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> $<c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-><c- o>=</c-><c- s>&quot;required&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;number&quot;</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;0&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;0.01&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;2.pprice&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;24.99&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>button</c-> <c- e>formnovalidate</c-><c- o>=</c-><c- s>&quot;formnovalidate&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;action&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;delete:2&quot;</c-><c- p>&gt;</c->Delete<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-><c- o>=</c-><c- s>&quot;required&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;3.pid&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;&quot;</c-> <c- e>pattern</c-><c- o>=</c-><c- s>&quot;[A-Z0-9]+&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-><c- o>=</c-><c- s>&quot;required&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;3.pname&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> $<c- p>&lt;</c-><c- f>input</c-> <c- e>required</c-><c- o>=</c-><c- s>&quot;required&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;number&quot;</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;0&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;0.01&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;3.pprice&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>button</c-> <c- e>formnovalidate</c-><c- o>=</c-><c- s>&quot;formnovalidate&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;action&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;delete:3&quot;</c-><c- p>&gt;</c->Delete<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>button</c-> <c- e>formnovalidate</c-><c- o>=</c-><c- s>&quot;formnovalidate&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;action&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;add&quot;</c-><c- p>&gt;</c->Add<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>button</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;action&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;update&quot;</c-><c- p>&gt;</c->Save<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h6 id=the-required-attribute><span class=secno>4.10.5.3.4</span> The <code id=the-required-attribute:attr-input-required><a href=#attr-input-required>required</a></code> attribute<a href=#the-required-attribute class=self-link></a></h6>

  <p>The <dfn data-dfn-for=input id=attr-input-required data-dfn-type=element-attr><code>required</code></dfn>
  attribute is a <a id=the-required-attribute:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. When specified, the element is <dfn id=concept-input-required><i>required</i></dfn>.</p>

  

  <p><strong>Constraint validation</strong>: If the element is <i id=the-required-attribute:concept-input-required><a href=#concept-input-required>required</a></i>, and its <code id=the-required-attribute:dom-input-value><a href=#dom-input-value>value</a></code>
  IDL attribute <a href=#concept-input-apply id=the-required-attribute:concept-input-apply>applies</a> and is in the mode <a href=#dom-input-value-value id=the-required-attribute:dom-input-value-value>value</a>, and the element is <i id=the-required-attribute:concept-fe-mutable><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, and the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-required-attribute:concept-fe-value>value</a> is the empty string, then the element is <a id=the-required-attribute:suffering-from-being-missing href=form-control-infrastructure.html#suffering-from-being-missing>suffering
  from being missing</a>.</p>

  

  <div class=example>

   <p>The following form has two required fields, one for an email address and one for a password.
   It also has a third field that is only considered valid if the user types the same password in
   the password field and this third field.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Create new account<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;/newaccount&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>post</c->
      <c- e>oninput</c-><c- o>=</c-><c- s>&quot;up2.setCustomValidity(up2.value != up.value ? &apos;Passwords do not match.&apos; : &apos;&apos;)&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>&quot;username&quot;</c-><c- p>&gt;</c->Email address:<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;username&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>email</c-> <c- e>required</c-> <c- e>name</c-><c- o>=</c-><c- s>un</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>&quot;password1&quot;</c-><c- p>&gt;</c->Password:<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;password1&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>password</c-> <c- e>required</c-> <c- e>name</c-><c- o>=</c-><c- s>up</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>&quot;password2&quot;</c-><c- p>&gt;</c->Confirm password:<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;password2&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>password</c-> <c- e>name</c-><c- o>=</c-><c- s>up2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Create account&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>For radio buttons, the <code id=the-required-attribute:attr-input-required-2><a href=#attr-input-required>required</a></code> attribute is
   satisfied if any of the radio buttons in the <a href=#radio-button-group id=the-required-attribute:radio-button-group>group</a> is
   selected. Thus, in the following example, any of the radio buttons can be checked, not just the
   one marked as required:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->Did the movie pass the Bechdel test?<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;radio&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;bechdel&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;no-characters&quot;</c-><c- p>&gt;</c-> No, there are not even two female characters in the movie. <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;radio&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;bechdel&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;no-names&quot;</c-><c- p>&gt;</c-> No, the female characters never talk to each other. <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;radio&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;bechdel&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;no-topic&quot;</c-><c- p>&gt;</c-> No, when female characters talk to each other it&apos;s always about a male character. <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;radio&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;bechdel&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;yes&quot;</c-> <strong><c- e>required</c-></strong><c- p>&gt;</c-> Yes. <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;radio&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;bechdel&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;unknown&quot;</c-><c- p>&gt;</c-> I don&apos;t know. <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></code></pre>

   <p>To avoid confusion as to whether a <a href=#radio-button-group id=the-required-attribute:radio-button-group-2>radio button group</a> is required or not, authors
   are encouraged to specify the attribute on all the radio buttons in a group. Indeed, in general,
   authors are encouraged to avoid having radio button groups that do not have any initially checked
   controls in the first place, as this is a state that the user cannot return to, and is therefore
   generally considered a poor user interface.</p>

  </div>


  <h6 id=the-multiple-attribute><span class=secno>4.10.5.3.5</span> The <code id=the-multiple-attribute:attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute<a href=#the-multiple-attribute class=self-link></a></h6>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple title="The Boolean multiple attribute, if set, means the form control accepts one or more values. Valid for the email and file input types and the <select>, the manner by which the user opts for multiple values depends on the form control.">Attributes/multiple</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.6+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-multiple title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#attr-multiple</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.6+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>≤12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>≤37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>≤12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-multiple data-dfn-type=element-attr><code>multiple</code></dfn>
  attribute is a <a id=the-multiple-attribute:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a> that indicates whether the user is to be allowed to
  specify more than one value.</p>

  <div class=example>

   <p>The following extract shows how an email client's "To" field could accept multiple email
   addresses.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->To: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>email</c-> <c- e>multiple</c-> <c- e>name</c-><c- o>=</c-><c- s>to</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

   <p>If the user had, amongst many friends in their user contacts database, two friends
   "Spider-Man" (with address "spider@parker.example.net") and "Scarlet Witch" (with address
   "scarlet@avengers.example.net"), then, after the user has typed "<kbd>s</kbd>", the user agent
   might suggest these two email addresses to the user.</p>

   
   <p><img class=darkmode-aware src=../images/sample-email-1.svg width=330 alt="" height=100></p>

   <p>The page could also link in the user's contacts database from the site:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->To: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>email</c-> <c- e>multiple</c-> <c- e>name</c-><c- o>=</c-><c- s>to</c-> <c- e>list</c-><c- o>=</c-><c- s>contacts</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
...
<c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;contacts&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;hedral@damowmow.com&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;pillar@example.com&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;astrophy@cute.example&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;astronomy@science.example.org&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c-></code></pre>

   <p>Suppose the user had entered "<kbd>bob@example.net</kbd>" into this text control, and then
   started typing a second email address starting with "<kbd>s</kbd>". The user agent might show
   both the two friends mentioned earlier, as well as the "astrophy" and "astronomy" values given in
   the <code id=the-multiple-attribute:the-datalist-element><a href=form-elements.html#the-datalist-element>datalist</a></code> element.</p>

   
   <p><img class=darkmode-aware src=../images/sample-email-2.svg width=330 alt="" height=140></p>

  </div>

  <div class=example>

   <p>The following extract shows how an email client's "Attachments" field could accept multiple
   files for upload.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->Attachments: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>file</c-> <c- e>multiple</c-> <c- e>name</c-><c- o>=</c-><c- s>att</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h6 id=the-pattern-attribute><span class=secno>4.10.5.3.6</span> The <code id=the-pattern-attribute:attr-input-pattern><a href=#attr-input-pattern>pattern</a></code> attribute<a href=#the-pattern-attribute class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern title="The pattern attribute specifies a regular expression the form control's value should match. If a non-null value doesn't conform to the constraints set by the pattern value, the ValidityState object's read-only patternMismatch property will be true.">Attributes/pattern</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>≤12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>≤37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>≤12.1+</span></span></div></div></div>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern title="The pattern attribute specifies a regular expression the form control's value should match. If a non-null value doesn't conform to the constraints set by the pattern value, the ValidityState object's read-only patternMismatch property will be true.">Attributes/pattern</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-pattern data-dfn-type=element-attr><code>pattern</code></dfn>
  attribute specifies a regular expression against which the control's <a href=form-control-infrastructure.html#concept-fe-value id=the-pattern-attribute:concept-fe-value>value</a>, or, when the <code id=the-pattern-attribute:attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute <a href=#concept-input-apply id=the-pattern-attribute:concept-input-apply>applies</a> and is set, the control's <a href=form-control-infrastructure.html#concept-fe-values id=the-pattern-attribute:concept-fe-values>values</a>, are to be checked.</p>

  <p>If specified, the attribute's value must match the JavaScript <i id=the-pattern-attribute:js-prod-pattern><a data-x-internal=js-prod-pattern href=https://tc39.es/ecma262/#prod-Pattern>Pattern</a></i><sub><code>[+UnicodeSetsMode, +N]</code></sub> production.</p>

  

  <p>The <dfn id=compiled-pattern-regular-expression>compiled pattern regular expression</dfn> of an <code id=the-pattern-attribute:the-input-element><a href=#the-input-element>input</a></code> element, if it
  exists, is a JavaScript <code id=the-pattern-attribute:regexp><a data-x-internal=regexp href=https://tc39.es/ecma262/#sec-regexp-regular-expression-objects>RegExp</a></code> object. It is determined as follows:</p>

  <ol><li><p>If the element does not have a <code id=the-pattern-attribute:attr-input-pattern-2><a href=#attr-input-pattern>pattern</a></code> attribute
   specified, then return nothing. The element has no <a href=#compiled-pattern-regular-expression id=the-pattern-attribute:compiled-pattern-regular-expression>compiled pattern regular
   expression</a>.<li><p>Let <var>pattern</var> be the value of the <code id=the-pattern-attribute:attr-input-pattern-3><a href=#attr-input-pattern>pattern</a></code> attribute of the element.<li><p>Let <var>regexpCompletion</var> be <a id=the-pattern-attribute:regexpcreate href=https://tc39.es/ecma262/#sec-regexpcreate data-x-internal=regexpcreate>RegExpCreate</a>(<var>pattern</var>,
   "<code>v</code>").<li>
    <p>If <var>regexpCompletion</var> is an <a href=https://tc39.es/ecma262/#sec-completion-record-specification-type id=the-pattern-attribute:completion-record data-x-internal=completion-record>abrupt
    completion</a>, then return nothing. The element has no <a href=#compiled-pattern-regular-expression id=the-pattern-attribute:compiled-pattern-regular-expression-2>compiled pattern regular
    expression</a>.</p>

    <p class=note>User agents are encouraged to log this error in a developer console, to aid
    debugging.</p>
   <li><p>Let <var>anchoredPattern</var> be the string "<code>^(?:</code>", followed by
   <var>pattern</var>, followed by "<code>)$</code>".<li><p>Return ! <a id=the-pattern-attribute:regexpcreate-2 href=https://tc39.es/ecma262/#sec-regexpcreate data-x-internal=regexpcreate>RegExpCreate</a>(<var>anchoredPattern</var>, "<code>v</code>").</ol>

  <p class=note>The reasoning behind these steps, instead of just using the value of the <code id=the-pattern-attribute:attr-input-pattern-4><a href=#attr-input-pattern>pattern</a></code> attribute directly, is twofold. First, we want to
  ensure that when matched against a string, the regular expression's start is anchored to the start
  of the string and its end to the end of the string. Second, we want to ensure that the regular
  expression is valid in standalone form, instead of only becoming valid after being surrounded by
  the "<code>^(?:</code>" and "<code>)$</code>" anchors.</p>

  <p>A <code id=the-pattern-attribute:regexp-2><a data-x-internal=regexp href=https://tc39.es/ecma262/#sec-regexp-regular-expression-objects>RegExp</a></code> object <var>regexp</var> <dfn id=regexp-match-a-string>matches</dfn> a string <var>input</var>, if !
  <a id=the-pattern-attribute:regexpbuiltinexec href=https://tc39.es/ecma262/#sec-regexpbuiltinexec data-x-internal=regexpbuiltinexec>RegExpBuiltinExec</a>(<var>regexp</var>, <var>input</var>) is not null.</p>

  <p><strong>Constraint validation</strong>: If the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-pattern-attribute:concept-fe-value-2>value</a> is not the empty string, and either the element's <code id=the-pattern-attribute:attr-input-multiple-2><a href=#attr-input-multiple>multiple</a></code> attribute is not specified or it <a href=#do-not-apply id=the-pattern-attribute:do-not-apply>does not apply</a> to the <code id=the-pattern-attribute:the-input-element-2><a href=#the-input-element>input</a></code> element given its <code id=the-pattern-attribute:attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state, and the element has a
  <a href=#compiled-pattern-regular-expression id=the-pattern-attribute:compiled-pattern-regular-expression-3>compiled pattern regular expression</a> but that regular expression does not <a href=#regexp-match-a-string id=the-pattern-attribute:regexp-match-a-string>match</a> the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-pattern-attribute:concept-fe-value-3>value</a>, then the element is <a id=the-pattern-attribute:suffering-from-a-pattern-mismatch href=form-control-infrastructure.html#suffering-from-a-pattern-mismatch>suffering from a pattern
  mismatch</a>.</p>

  <p><strong>Constraint validation</strong>: If the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-pattern-attribute:concept-fe-value-4>value</a> is not the empty string, and the element's <code id=the-pattern-attribute:attr-input-multiple-3><a href=#attr-input-multiple>multiple</a></code> attribute is specified and <a href=#concept-input-apply id=the-pattern-attribute:concept-input-apply-2>applies</a> to the <code id=the-pattern-attribute:the-input-element-3><a href=#the-input-element>input</a></code> element, and the element has
  a <a href=#compiled-pattern-regular-expression id=the-pattern-attribute:compiled-pattern-regular-expression-4>compiled pattern regular expression</a> but that regular expression does not <a href=#regexp-match-a-string id=the-pattern-attribute:regexp-match-a-string-2>match</a> each of the element's <a href=form-control-infrastructure.html#concept-fe-values id=the-pattern-attribute:concept-fe-values-2>values</a>, then the element is <a id=the-pattern-attribute:suffering-from-a-pattern-mismatch-2 href=form-control-infrastructure.html#suffering-from-a-pattern-mismatch>suffering from a pattern
  mismatch</a>.</p>

  

  <p>When an <code id=the-pattern-attribute:the-input-element-4><a href=#the-input-element>input</a></code> element has a <code id=the-pattern-attribute:attr-input-pattern-5><a href=#attr-input-pattern>pattern</a></code>
  attribute specified, authors should include a <dfn data-dfn-for=input id=attr-input-title data-dfn-type=element-attr><code>title</code></dfn> attribute to give a description of the pattern.  User
  agents may use the contents of this attribute, if it is present, when informing the user that the
  pattern is not matched, or at any other suitable time, such as in a tooltip or read out by
  assistive technology when the control <a id=the-pattern-attribute:gains-focus href=interaction.html#gains-focus>gains focus</a>.</p>

  <div class=example>
   <p>For example, the following snippet:</p>
   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c-> Part number:
 <c- p>&lt;</c-><c- f>input</c-> <c- e>pattern</c-><c- o>=</c-><c- s>&quot;[0-9][A-Z]{3}&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;part&quot;</c->
        <c- e>title</c-><c- o>=</c-><c- s>&quot;A part number is a digit followed by three uppercase letters.&quot;</c-><c- p>/&gt;</c->
<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>
   <p>...could cause the UA to display an alert such as:</p>
   <pre><samp>A part number is a digit followed by three uppercase letters.
You cannot submit this form when the field is incorrect.</samp></pre>
  </div>

  <p>When a control has a <code id=the-pattern-attribute:attr-input-pattern-6><a href=#attr-input-pattern>pattern</a></code> attribute, the <code id=the-pattern-attribute:attr-input-title><a href=#attr-input-title>title</a></code> attribute, if used, must describe the pattern. Additional
  information could also be included, so long as it assists the user in filling in the control.
  Otherwise, assistive technology would be impaired.</p>

  <p class=example>For instance, if the title attribute contained the caption of the control,
  assistive technology could end up saying something like <samp>The text you have entered does not
  match the required pattern. Birthday</samp>, which is not useful.</p>

  <p>UAs may still show the <code id=the-pattern-attribute:attr-title><a href=dom.html#attr-title>title</a></code> in non-error situations (for
  example, as a tooltip when hovering over the control), so authors should be careful not to word
  <code id=the-pattern-attribute:attr-input-title-2><a href=#attr-input-title>title</a></code>s as if an error has necessarily occurred.</p>


  <h6 id=the-min-and-max-attributes><span class=secno>4.10.5.3.7</span> The <code id=the-min-and-max-attributes:attr-input-min><a href=#attr-input-min>min</a></code> and <code id=the-min-and-max-attributes:attr-input-max><a href=#attr-input-max>max</a></code> attributes<a href=#the-min-and-max-attributes class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max title="The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the value of the element is greater than this, the element fails validation. This value must be greater than or equal to the value of the min attribute. If the max attribute is present but is not specified or is invalid, no max value is applied. If the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission.">Attributes/max</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>16+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min title="The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute. If the value of the element is less than this, the element fails validation. This value must be less than or equal to the value of the max attribute.">Attributes/min</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>16+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  

  <p>Some form controls can have explicit constraints applied limiting the allowed range of values
  that the user can provide. Normally, such a range would be linear and continuous. A form control
  can <dfn id=has-a-periodic-domain>have a periodic domain</dfn>, however, in which case the
  form control's broadest possible range is finite, and authors can specify explicit ranges within
  it that span the boundaries.</p>

  <p class=example>Specifically, the broadest range of a <code id="the-min-and-max-attributes:time-state-(type=time)"><a href="#time-state-(type=time)">type=time</a></code> control is midnight to midnight (24 hours), and
  authors can set both continuous linear ranges (such as 9pm to 11pm) and discontinuous ranges
  spanning midnight (such as 11pm to 1am).</p>

  <p>The <dfn data-dfn-for=input id=attr-input-min data-dfn-type=element-attr><code>min</code></dfn> and <dfn data-dfn-for=input id=attr-input-max data-dfn-type=element-attr><code>max</code></dfn> attributes indicate the
  allowed range of values for the element.</p>

  

  <p>Their syntax is defined by the section that defines the <code id=the-min-and-max-attributes:attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state.</p>

  <p>If the element has a <code id=the-min-and-max-attributes:attr-input-min-2><a href=#attr-input-min>min</a></code> attribute, and the result of
  applying the <a href=#concept-input-value-string-number id=the-min-and-max-attributes:concept-input-value-string-number>algorithm to convert a string to a
  number</a> to the value of the <code id=the-min-and-max-attributes:attr-input-min-3><a href=#attr-input-min>min</a></code> attribute is a number,
  then that number is the element's <dfn id=concept-input-min>minimum</dfn>; otherwise, if the
  <code id=the-min-and-max-attributes:attr-input-type-2><a href=#attr-input-type>type</a></code> attribute's current state defines a <dfn id=concept-input-min-default>default minimum</dfn>, then that is the <a href=#concept-input-min id=the-min-and-max-attributes:concept-input-min>minimum</a>; otherwise, the element has no <a href=#concept-input-min id=the-min-and-max-attributes:concept-input-min-2>minimum</a>.</p>

  <p>The <code id=the-min-and-max-attributes:attr-input-min-4><a href=#attr-input-min>min</a></code> attribute also defines the <a href=#concept-input-min-zero id=the-min-and-max-attributes:concept-input-min-zero>step base</a>.</p>

  <p>If the element has a <code id=the-min-and-max-attributes:attr-input-max-2><a href=#attr-input-max>max</a></code> attribute, and the result of
  applying the <a href=#concept-input-value-string-number id=the-min-and-max-attributes:concept-input-value-string-number-2>algorithm to convert a string to a
  number</a> to the value of the <code id=the-min-and-max-attributes:attr-input-max-3><a href=#attr-input-max>max</a></code> attribute is a number,
  then that number is the element's <dfn id=concept-input-max>maximum</dfn>; otherwise, if the
  <code id=the-min-and-max-attributes:attr-input-type-3><a href=#attr-input-type>type</a></code> attribute's current state defines a <dfn id=concept-input-max-default>default maximum</dfn>, then that is the <a href=#concept-input-max id=the-min-and-max-attributes:concept-input-max>maximum</a>; otherwise, the element has no <a href=#concept-input-max id=the-min-and-max-attributes:concept-input-max-2>maximum</a>.</p>

  

  <p>If the element does not <a href=#has-a-periodic-domain id=the-min-and-max-attributes:has-a-periodic-domain>have a periodic domain</a>, the
  <code id=the-min-and-max-attributes:attr-input-max-4><a href=#attr-input-max>max</a></code> attribute's value (the <a href=#concept-input-max id=the-min-and-max-attributes:concept-input-max-3>maximum</a>) must not be less than the <code id=the-min-and-max-attributes:attr-input-min-5><a href=#attr-input-min>min</a></code> attribute's value (its <a href=#concept-input-min id=the-min-and-max-attributes:concept-input-min-3>minimum</a>).</p>

  

  <p class=note>If an element that does not <a href=#has-a-periodic-domain id=the-min-and-max-attributes:has-a-periodic-domain-2>have a periodic
  domain</a> has a <a href=#attr-input-max id=the-min-and-max-attributes:attr-input-max-5>maximum</a> that is less than its <a href=#attr-input-min id=the-min-and-max-attributes:attr-input-min-6>minimum</a>, then so long as the element has a <a href=form-control-infrastructure.html#concept-fe-value id=the-min-and-max-attributes:concept-fe-value>value</a>, it will either be <a id=the-min-and-max-attributes:suffering-from-an-underflow href=form-control-infrastructure.html#suffering-from-an-underflow>suffering from an underflow</a>
  or <a id=the-min-and-max-attributes:suffering-from-an-overflow href=form-control-infrastructure.html#suffering-from-an-overflow>suffering from an overflow</a>.</p>

  <p>An element <dfn id=has-a-reversed-range>has a reversed range</dfn> if it <a href=#has-a-periodic-domain id=the-min-and-max-attributes:has-a-periodic-domain-3>has a periodic domain</a> and its
  <a href=#concept-input-max id=the-min-and-max-attributes:concept-input-max-4>maximum</a> is less than its <a href=#concept-input-min id=the-min-and-max-attributes:concept-input-min-4>minimum</a>.</p>

  

  <p>An element <dfn id=have-range-limitations>has range limitations</dfn> if it has a defined
  <a href=#concept-input-min id=the-min-and-max-attributes:concept-input-min-5>minimum</a> or a defined <a href=#concept-input-max id=the-min-and-max-attributes:concept-input-max-5>maximum</a>.</p>

  

  <p><strong>Constraint validation</strong>: When the element has a <a href=#attr-input-min id=the-min-and-max-attributes:attr-input-min-7>minimum</a> and does not <a href=#has-a-reversed-range id=the-min-and-max-attributes:has-a-reversed-range>have a
  reversed range</a>, and the result of applying the <a href=#concept-input-value-string-number id=the-min-and-max-attributes:concept-input-value-string-number-3>algorithm to convert a string to a number</a> to
  the string given by the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-min-and-max-attributes:concept-fe-value-2>value</a> is a number, and
  the number obtained from that algorithm is less than the <a href=#attr-input-min id=the-min-and-max-attributes:attr-input-min-8>minimum</a>, the element is <a id=the-min-and-max-attributes:suffering-from-an-underflow-2 href=form-control-infrastructure.html#suffering-from-an-underflow>suffering from an
  underflow</a>.</p>

  <p><strong>Constraint validation</strong>: When the element has a <a href=#attr-input-max id=the-min-and-max-attributes:attr-input-max-6>maximum</a> and does not <a href=#has-a-reversed-range id=the-min-and-max-attributes:has-a-reversed-range-2>have a
  reversed range</a>, and the result of applying the <a href=#concept-input-value-string-number id=the-min-and-max-attributes:concept-input-value-string-number-4>algorithm to convert a string to a number</a> to
  the string given by the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-min-and-max-attributes:concept-fe-value-3>value</a> is a number, and
  the number obtained from that algorithm is more than the <a href=#attr-input-max id=the-min-and-max-attributes:attr-input-max-7>maximum</a>, the element is <a id=the-min-and-max-attributes:suffering-from-an-overflow-2 href=form-control-infrastructure.html#suffering-from-an-overflow>suffering from an
  overflow</a>.</p>

  <p><strong>Constraint validation</strong>: When an element <a href=#has-a-reversed-range id=the-min-and-max-attributes:has-a-reversed-range-3>has a reversed range</a>,
  and the result of applying the <a href=#concept-input-value-string-number id=the-min-and-max-attributes:concept-input-value-string-number-5>algorithm to
  convert a string to a number</a> to the string given by the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-min-and-max-attributes:concept-fe-value-4>value</a> is a number, and the number obtained from that algorithm
  is more than the <a href=#attr-input-max id=the-min-and-max-attributes:attr-input-max-8>maximum</a> <em>and</em> less than the <a href=#attr-input-min id=the-min-and-max-attributes:attr-input-min-9>minimum</a>, the element is simultaneously <a id=the-min-and-max-attributes:suffering-from-an-underflow-3 href=form-control-infrastructure.html#suffering-from-an-underflow>suffering from an
  underflow</a> and <a id=the-min-and-max-attributes:suffering-from-an-overflow-3 href=form-control-infrastructure.html#suffering-from-an-overflow>suffering from an overflow</a>.</p>

  

  <div class=example>

   <p>The following date control limits input to dates that are before the 1980s:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>bday</c-> <c- e>type</c-><c- o>=</c-><c- s>date</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;1979-12-31&quot;</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>The following number control limits input to whole numbers greater than zero:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>quantity</c-> <c- e>required</c-><c- o>=</c-><c- s>&quot;&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;number&quot;</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;1&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1&quot;</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>The following time control limits input to those minutes that occur between 9pm and 6am,
   defaulting to midnight:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;sleepStart&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>time</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;21:00&quot;</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;06:00&quot;</c-> <c- e>step</c-><c- o>=</c-><c- s>&quot;60&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;00:00&quot;</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h6 id=the-step-attribute><span class=secno>4.10.5.3.8</span> The <code id=the-step-attribute:attr-input-step><a href=#attr-input-step>step</a></code> attribute<a href=#the-step-attribute class=self-link></a></h6>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step title="The step attribute is a number that specifies the granularity that the value must adhere to or the keyword any. It is valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types.">Attributes/step</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>16+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>5+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-step data-dfn-type=element-attr><code>step</code></dfn> attribute
  indicates the granularity that is expected (and required) of the <a href=form-control-infrastructure.html#concept-fe-value id=the-step-attribute:concept-fe-value>value</a> or <a href=form-control-infrastructure.html#concept-fe-values id=the-step-attribute:concept-fe-values>values</a>, by
  limiting the allowed values. The section that defines the <code id=the-step-attribute:attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state also defines the <dfn id=concept-input-step-default>default step</dfn>, the <dfn id=concept-input-step-scale>step scale factor</dfn>, and in some cases the <dfn id=concept-input-step-default-base>default step base</dfn>, which are used in processing the
  attribute as described below.</p>

  <p>The <code id=the-step-attribute:attr-input-step-2><a href=#attr-input-step>step</a></code> attribute, if specified, must either have a
  value that is a <a id=the-step-attribute:valid-floating-point-number href=common-microsyntaxes.html#valid-floating-point-number>valid floating-point number</a> that <a href=common-microsyntaxes.html#rules-for-parsing-floating-point-number-values id=the-step-attribute:rules-for-parsing-floating-point-number-values>parses</a> to a number that is greater than zero, or must have a
  value that is an <a id=the-step-attribute:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>any</code>".</p>

  

  <p>The attribute provides the <dfn id=concept-input-step>allowed value step</dfn> for the
  element, as follows:</p>

  <ol><li><p>If the attribute does not <a href=#concept-input-apply id=the-step-attribute:concept-input-apply>apply</a>, then there is
   no <a href=#concept-input-step id=the-step-attribute:concept-input-step>allowed value step</a>.<li><p>Otherwise, if the attribute is absent, then the <a href=#concept-input-step id=the-step-attribute:concept-input-step-2>allowed
   value step</a> is the <a href=#concept-input-step-default id=the-step-attribute:concept-input-step-default>default step</a> multiplied
   by the <a href=#concept-input-step-scale id=the-step-attribute:concept-input-step-scale>step scale factor</a>.<li><p>Otherwise, if the attribute's value is an <a id=the-step-attribute:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the
   string "<code>any</code>", then there is no <a href=#concept-input-step id=the-step-attribute:concept-input-step-3>allowed
   value step</a>.<li><p>Otherwise, if the <a id=the-step-attribute:rules-for-parsing-floating-point-number-values-2 href=common-microsyntaxes.html#rules-for-parsing-floating-point-number-values>rules for parsing floating-point number values</a>, when they are
   applied to the attribute's value, return an error, zero, or a number less than zero, then the
   <a href=#concept-input-step id=the-step-attribute:concept-input-step-4>allowed value step</a> is the <a href=#concept-input-step-default id=the-step-attribute:concept-input-step-default-2>default step</a> multiplied by the <a href=#concept-input-step-scale id=the-step-attribute:concept-input-step-scale-2>step scale factor</a>.<li><p>Otherwise, the <a href=#concept-input-step id=the-step-attribute:concept-input-step-5>allowed value step</a> is the number
   returned by the <a id=the-step-attribute:rules-for-parsing-floating-point-number-values-3 href=common-microsyntaxes.html#rules-for-parsing-floating-point-number-values>rules for parsing floating-point number values</a> when they are applied
   to the attribute's value, multiplied by the <a href=#concept-input-step-scale id=the-step-attribute:concept-input-step-scale-3>step scale
   factor</a>.</ol>

  <p>The <dfn id=concept-input-min-zero>step base</dfn> is the value returned by the following
  algorithm:</p>

  <ol><li><p>If the element has a <code id=the-step-attribute:attr-input-min><a href=#attr-input-min>min</a></code> content attribute, and the
   result of applying the <a href=#concept-input-value-string-number id=the-step-attribute:concept-input-value-string-number>algorithm to convert a
   string to a number</a> to the value of the <code id=the-step-attribute:attr-input-min-2><a href=#attr-input-min>min</a></code> content
   attribute is not an error, then return that result.<li><p>If the element has a <code id=the-step-attribute:attr-input-value><a href=#attr-input-value>value</a></code> content attribute, and
   the result of applying the <a href=#concept-input-value-string-number id=the-step-attribute:concept-input-value-string-number-2>algorithm to convert
   a string to a number</a> to the value of the <code id=the-step-attribute:attr-input-value-2><a href=#attr-input-value>value</a></code>
   content attribute is not an error, then return that result.<li><p>If a <a href=#concept-input-step-default-base id=the-step-attribute:concept-input-step-default-base>default step base</a> is defined for
   this element given its <code id=the-step-attribute:attr-input-type-2><a href=#attr-input-type>type</a></code> attribute's state, then return
   it.</p>

   <li><p>Return zero.</ol>

  <p><strong>Constraint validation</strong>: When the element has an <a href=#concept-input-step id=the-step-attribute:concept-input-step-6>allowed value step</a>, and the result of applying the <a href=#concept-input-value-string-number id=the-step-attribute:concept-input-value-string-number-3>algorithm to convert a string to a number</a> to
  the string given by the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-step-attribute:concept-fe-value-2>value</a> is a number, and
  that number subtracted from the <a href=#concept-input-min-zero id=the-step-attribute:concept-input-min-zero>step base</a> is not an
  integral multiple of the <a href=#concept-input-step id=the-step-attribute:concept-input-step-7>allowed value step</a>, the
  element is <a id=the-step-attribute:suffering-from-a-step-mismatch href=form-control-infrastructure.html#suffering-from-a-step-mismatch>suffering from a step mismatch</a>.</p>

  

  <div class=example>

   <p>The following range control only accepts values in the range 0..1, and allows 256 steps in
   that range:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>opacity</c-> <c- e>type</c-><c- o>=</c-><c- s>range</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>max</c-><c- o>=</c-><c- s>1</c-> <c- e>step</c-><c- o>=</c-><c- s>0.00392156863</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>The following control allows any time in the day to be selected, with any accuracy (e.g.
   thousandth-of-a-second accuracy or more):</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>favtime</c-> <c- e>type</c-><c- o>=</c-><c- s>time</c-> <c- e>step</c-><c- o>=</c-><c- s>any</c-><c- p>&gt;</c-></code></pre>

   <p>Normally, time controls are limited to an accuracy of one minute.</p>

  </div>



  <h6 id=the-list-attribute><span class=secno>4.10.5.3.9</span> The <code id=the-list-attribute:attr-input-list><a href=#attr-input-list>list</a></code> attribute<a href=#the-list-attribute class=self-link></a></h6>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#list title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#list</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>12.1+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4.3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-list data-dfn-type=element-attr><code>list</code></dfn> attribute is
  used to identify an element that lists predefined options suggested to the user.</p>

  <p>If present, its value must be the <a href=https://dom.spec.whatwg.org/#concept-id id=the-list-attribute:concept-id data-x-internal=concept-id>ID</a> of a <code id=the-list-attribute:the-datalist-element><a href=form-elements.html#the-datalist-element>datalist</a></code>
  element in the same <a id=the-list-attribute:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a>.</p>

  

  <p>The <dfn id=concept-input-list>suggestions source element</dfn> is the first element in
  the <a id=the-list-attribute:tree-2 href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a> in <a id=the-list-attribute:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a> to have an <a href=https://dom.spec.whatwg.org/#concept-id id=the-list-attribute:concept-id-2 data-x-internal=concept-id>ID</a>
  equal to the value of the <code id=the-list-attribute:attr-input-list-2><a href=#attr-input-list>list</a></code> attribute, if that element
  is a <code id=the-list-attribute:the-datalist-element-2><a href=form-elements.html#the-datalist-element>datalist</a></code> element. If there is no <code id=the-list-attribute:attr-input-list-3><a href=#attr-input-list>list</a></code>
  attribute, or if there is no element with that <a href=https://dom.spec.whatwg.org/#concept-id id=the-list-attribute:concept-id-3 data-x-internal=concept-id>ID</a>, or if the
  first element with that <a href=https://dom.spec.whatwg.org/#concept-id id=the-list-attribute:concept-id-4 data-x-internal=concept-id>ID</a> is not a <code id=the-list-attribute:the-datalist-element-3><a href=form-elements.html#the-datalist-element>datalist</a></code>
  element, then there is no <a href=#concept-input-list id=the-list-attribute:concept-input-list>suggestions source
  element</a>.</p>

  <p>If there is a <a href=#concept-input-list id=the-list-attribute:concept-input-list-2>suggestions source element</a>, then, when
  the user agent is allowing the user to edit the <code id=the-list-attribute:the-input-element><a href=#the-input-element>input</a></code> element's <a href=form-control-infrastructure.html#concept-fe-value id=the-list-attribute:concept-fe-value>value</a>, the user agent should offer the suggestions represented by
  the <a href=#concept-input-list id=the-list-attribute:concept-input-list-3>suggestions source element</a> to the user in a manner
  suitable for the type of control used. If appropriate, the user agent should use the suggestion's
  <a href=form-elements.html#concept-option-label id=the-list-attribute:concept-option-label>label</a> and <a href=form-elements.html#concept-option-value id=the-list-attribute:concept-option-value>value</a> to identify the suggestion to the user.</p>

  <p>User agents are encouraged to filter the suggestions represented by the <a href=#concept-input-list id=the-list-attribute:concept-input-list-4>suggestions source element</a> when the number of suggestions is
  large, including only the most relevant ones (e.g. based on the user's input so far). No precise
  threshold is defined, but capping the list at four to seven values is reasonable. If filtering
  based on the user's input, user agents should search within both the <a href=form-elements.html#concept-option-label id=the-list-attribute:concept-option-label-2>label</a> and <a href=form-elements.html#concept-option-value id=the-list-attribute:concept-option-value-2>value</a>
  of the suggestions for matches. User agents should consider how input variations affect the
  matching process. Unicode normalization should be applied so that different underlying Unicode
  code point sequences, caused by different keyboard- or input-specific mechanisms, do not
  interfere with the matching process. Case variations should be ignored, which may require
  language-specific case mapping. For examples of these, see <cite>Character Model for the World
  Wide Web: String Matching</cite>. User agents may also provide other matching features: for
  illustration, a few examples include matching different forms of kana to each other (or to kanji),
  ignoring accents, or applying spelling correction. <a href=references.html#refsCHARMODNORM>[CHARMODNORM]</a></p>

  <div class=example>
   <p>This text field allows you to choose a type of JavaScript function.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>list</c-><c- o>=</c-><c- s>&quot;function-types&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;function-types&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;function&quot;</c-><c- p>&gt;</c->function<c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;async function&quot;</c-><c- p>&gt;</c->async function<c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;function*&quot;</c-><c- p>&gt;</c->generator function<c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;=&gt;&quot;</c-><c- p>&gt;</c->arrow function<c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;async =&gt;&quot;</c-><c- p>&gt;</c->async arrow function<c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;async function*&quot;</c-><c- p>&gt;</c->async generator function<c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c-></code></pre>

   <p>For user agents that follow the above suggestions, both the <a href=form-elements.html#concept-option-label id=the-list-attribute:concept-option-label-3>label</a> and <a href=form-elements.html#concept-option-value id=the-list-attribute:concept-option-value-3>value</a>
   would be shown:</p>

   <p><img class=darkmode-aware src=../images/sample-datalist.svg width=280 alt="A text box with a drop down button on the right hand side; with, below, a drop down box containing a list of the six values the left and the six labels on the right." height=150></p>

   <p>Then, typing "<kbd>arrow</kbd>" or "<kbd>=></kbd>" would filter the list to the entries with
   labels "arrow function" and "async arrow function". Typing "<kbd>generator</kbd>" or
   "<kbd>*</kbd>" would filter the list to the entries with labels "generator function" and "async
   generator function".</p>
  </div>

  <p class=note>As always, user agents are free to make user interface decisions which are
  appropriate for their particular requirements and for the user's particular circumstances. However,
  this has historically been an area of confusion for implementers, web developers, and users alike,
  so we've given some "should" suggestions above.</p>


  <p>How user selections of suggestions are handled depends on whether the element is a control
  accepting a single value only, or whether it accepts multiple values:</p>

  <dl class=switch><dt>If the element does not have a <code id=the-list-attribute:attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute
   specified or if the <code id=the-list-attribute:attr-input-multiple-2><a href=#attr-input-multiple>multiple</a></code> attribute <a href=#do-not-apply id=the-list-attribute:do-not-apply>does not apply</a><dd>
    <p>When the user selects a suggestion, the <code id=the-list-attribute:the-input-element-2><a href=#the-input-element>input</a></code> element's <a href=form-control-infrastructure.html#concept-fe-value id=the-list-attribute:concept-fe-value-2>value</a> must be set to the selected suggestion's <a href=form-elements.html#concept-option-value id=the-list-attribute:concept-option-value-4>value</a>, as if the user had written that value themself.</p>
   <dt>If the element's <code id=the-list-attribute:attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href="#email-state-(type=email)" id="the-list-attribute:email-state-(type=email)">Email</a> state and the element has a <code id=the-list-attribute:attr-input-multiple-3><a href=#attr-input-multiple>multiple</a></code> attribute specified<dd>
    <p>When the user selects a suggestion, the user agent must either add a new entry to the
    <code id=the-list-attribute:the-input-element-3><a href=#the-input-element>input</a></code> element's <a href=form-control-infrastructure.html#concept-fe-values id=the-list-attribute:concept-fe-values>values</a>, whose value
    is the selected suggestion's <a href=form-elements.html#concept-option-value id=the-list-attribute:concept-option-value-5>value</a>, or change an
    existing entry in the <code id=the-list-attribute:the-input-element-4><a href=#the-input-element>input</a></code> element's <a href=form-control-infrastructure.html#concept-fe-values id=the-list-attribute:concept-fe-values-2>values</a> to have the value given by the selected
    suggestion's <a href=form-elements.html#concept-option-value id=the-list-attribute:concept-option-value-6>value</a>, as if the user had themself added
    an entry with that value, or edited an existing entry to be that value. Which behavior is to be
    applied depends on the user interface in an <a id=the-list-attribute:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> manner.</p>
   </dl>

  <hr>

  <p>If the <code id=the-list-attribute:attr-input-list-4><a href=#attr-input-list>list</a></code> attribute <a href=#do-not-apply id=the-list-attribute:do-not-apply-2>does not
  apply</a>, there is no <a href=#concept-input-list id=the-list-attribute:concept-input-list-5>suggestions source element</a>.</p>

  

  <div class=example>

   <p>This URL field offers some suggestions.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->Homepage: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>hp</c-> <c- e>type</c-><c- o>=</c-><c- s>url</c-> <c- e>list</c-><c- o>=</c-><c- s>hpurls</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>hpurls</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;https://www.google.com/&quot;</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Google&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;https://www.reddit.com/&quot;</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Reddit&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c-></code></pre>

   <p>Other URLs from the user's history might show also; this is up to the user agent.</p>

  </div>

  <div class=example>

   <p>This example demonstrates how to design a form that uses the autocompletion list feature while
   still degrading usefully in legacy user agents.</p>

   <p>If the autocompletion list is merely an aid, and is not important to the content, then simply
   using a <code id=the-list-attribute:the-datalist-element-4><a href=form-elements.html#the-datalist-element>datalist</a></code> element with children <code id=the-list-attribute:the-option-element><a href=form-elements.html#the-option-element>option</a></code> elements is enough. To
   prevent the values from being rendered in legacy user agents, they need to be placed inside the
   <code id=the-list-attribute:attr-option-value><a href=form-elements.html#attr-option-value>value</a></code> attribute instead of inline.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
  Enter a breed:
  <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;breed&quot;</c-> <c- e>list</c-><c- o>=</c-><c- s>&quot;breeds&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;breeds&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Abyssinian&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Alpaca&quot;</c-><c- p>&gt;</c->
   <c- c>&lt;!-- ... --&gt;</c->
  <c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>However, if the values need to be shown in legacy UAs, then fallback content can be placed
   inside the <code id=the-list-attribute:the-datalist-element-5><a href=form-elements.html#the-datalist-element>datalist</a></code> element, as follows:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
  Enter a breed:
  <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;breed&quot;</c-> <c- e>list</c-><c- o>=</c-><c- s>&quot;breeds&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;breeds&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
   or select one from the list:
   <c- p>&lt;</c-><c- f>select</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;breed&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c-> (none selected)
    <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Abyssinian
    <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Alpaca
    <c- c>&lt;!-- ... --&gt;</c->
   <c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>The fallback content will only be shown in UAs that don't support <code id=the-list-attribute:the-datalist-element-6><a href=form-elements.html#the-datalist-element>datalist</a></code>. The
   options, on the other hand, will be detected by all UAs, even though they are not children of the
   <code id=the-list-attribute:the-datalist-element-7><a href=form-elements.html#the-datalist-element>datalist</a></code> element.</p>

   <p>Note that if an <code id=the-list-attribute:the-option-element-2><a href=form-elements.html#the-option-element>option</a></code> element used in a <code id=the-list-attribute:the-datalist-element-8><a href=form-elements.html#the-datalist-element>datalist</a></code> is <code id=the-list-attribute:attr-option-selected><a href=form-elements.html#attr-option-selected>selected</a></code>, it will be selected by default by legacy UAs
   (because it affects the <code id=the-list-attribute:the-select-element><a href=form-elements.html#the-select-element>select</a></code> element), but it will not have any effect on the
   <code id=the-list-attribute:the-input-element-5><a href=#the-input-element>input</a></code> element in UAs that support <code id=the-list-attribute:the-datalist-element-9><a href=form-elements.html#the-datalist-element>datalist</a></code>.</p>

  </div>



  <h6 id=the-placeholder-attribute><span class=secno>4.10.5.3.10</span> The <code id=the-placeholder-attribute:attr-input-placeholder><a href=#attr-input-placeholder>placeholder</a></code> attribute<a href=#the-placeholder-attribute class=self-link></a></h6>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#placeholder</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#attr-placeholder</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>≤12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>≤37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>≤12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=input id=attr-input-placeholder data-dfn-type=element-attr><code>placeholder</code></dfn> attribute represents a <em>short</em>
  hint (a word or short phrase) intended to aid the user with data entry when the control has no
  value. A hint could be a sample value or a brief description of the expected format. The
  attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D
  CARRIAGE RETURN (CR) characters.</p>

  <p>The <code id=the-placeholder-attribute:attr-input-placeholder-2><a href=#attr-input-placeholder>placeholder</a></code> attribute should not be used as an
  alternative to a <code id=the-placeholder-attribute:the-label-element><a href=forms.html#the-label-element>label</a></code>. For a longer hint or other advisory text, the <code id=the-placeholder-attribute:attr-title><a href=dom.html#attr-title>title</a></code> attribute is more appropriate.</p>

  <p class=note>These mechanisms are very similar but subtly different: the hint given by the
  control's <code id=the-placeholder-attribute:the-label-element-2><a href=forms.html#the-label-element>label</a></code> is shown at all times; the short hint given in the <code id=the-placeholder-attribute:attr-input-placeholder-3><a href=#attr-input-placeholder>placeholder</a></code> attribute is shown before the user enters a
  value; and the hint in the <code id=the-placeholder-attribute:attr-title-2><a href=dom.html#attr-title>title</a></code> attribute is shown when the user
  requests further help.</p>

  

  <p>User agents should present this hint to the user, after having <a href=https://infra.spec.whatwg.org/#strip-newlines id=the-placeholder-attribute:strip-newlines data-x-internal=strip-newlines>stripped newlines</a> from it, when the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-placeholder-attribute:concept-fe-value>value</a> is the empty string, especially if the control is not
  <a id=the-placeholder-attribute:focused href=interaction.html#focused>focused</a>.</p>

  <p>If a user agent normally doesn't show this hint to the user when the control is
  <a id=the-placeholder-attribute:focused-2 href=interaction.html#focused>focused</a>, then the user agent should nonetheless show the hint for the control if it
  was focused as a result of the <code id=the-placeholder-attribute:attr-fe-autofocus><a href=interaction.html#attr-fe-autofocus>autofocus</a></code> attribute, since
  in that case the user will not have had an opportunity to examine the control before focusing
  it.</p>

  

  <div class=example>

   <p>Here is an example of a mail configuration user interface that uses the <code id=the-placeholder-attribute:attr-input-placeholder-4><a href=#attr-input-placeholder>placeholder</a></code> attribute:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->Mail Account<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Name: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;fullname&quot;</c-> <c- e>placeholder</c-><c- o>=</c-><c- s>&quot;John Ratzenberger&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Address: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;email&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;address&quot;</c-> <c- e>placeholder</c-><c- o>=</c-><c- s>&quot;john@example.net&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Password: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;password&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;password&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Description: <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;desc&quot;</c-> <c- e>placeholder</c-><c- o>=</c-><c- s>&quot;My Email Account&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In situations where the control's content has one directionality but the placeholder needs to
   have a different directionality, Unicode's bidirectional-algorithm formatting characters can be
   used in the attribute value:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>t1</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-> <c- e>placeholder</c-><c- o>=</c-><c- s>&quot;</c-><strong><c- s>&amp;#x202B;</c-></strong><c- s> </c-><bdo dir='rtl'><c- s>رقم الهاتف 1</c-></bdo><c- s> </c-><strong><c- s>&amp;#x202E;</c-></strong><c- s>&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>t2</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-> <c- e>placeholder</c-><c- o>=</c-><c- s>&quot;</c-><strong><c- s>&amp;#x202B;</c-></strong><c- s> </c-><bdo dir='rtl'><c- s>رقم الهاتف 2</c-></bdo><c- s> </c-><strong><c- s>&amp;#x202E;</c-></strong><c- s>&quot;</c-><c- p>&gt;</c-></code></pre>

   <p>For slightly more clarity, here's the same example using numeric character references instead of inline Arabic:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>t1</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-> <c- e>placeholder</c-><c- o>=</c-><c- s>&quot;</c-><strong><c- s>&amp;#x202B;</c-></strong><c- s>&amp;#1585;&amp;#1602;&amp;#1605; &amp;#1575;&amp;#1604;&amp;#1607;&amp;#1575;&amp;#1578;&amp;#1601; 1</c-><strong><c- s>&amp;#x202E;</c-></strong><c- s>&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>t2</c-> <c- e>type</c-><c- o>=</c-><c- s>tel</c-> <c- e>placeholder</c-><c- o>=</c-><c- s>&quot;</c-><strong><c- s>&amp;#x202B;</c-></strong><c- s>&amp;#1585;&amp;#1602;&amp;#1605; &amp;#1575;&amp;#1604;&amp;#1607;&amp;#1575;&amp;#1578;&amp;#1601; 2</c-><strong><c- s>&amp;#x202E;</c-></strong><c- s>&quot;</c-><c- p>&gt;</c-></code></pre>

  </div>




  <h5 id=common-input-element-apis><span class=secno>4.10.5.4</span> Common <code id=common-input-element-apis:the-input-element><a href=#the-input-element>input</a></code> element APIs<a href=#common-input-element-apis class=self-link></a></h5>

  <dl class=domintro><dt><code><var>input</var>.<a href=#dom-input-value id=dom-input-value-dev>value</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value>value</a> of the form control.</p>

    <p>Can be set, to change the value.</p>

    <p>Throws an <a id=common-input-element-apis:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=common-input-element-apis:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if it is
    set to any value other than the empty string when the control is a file upload control.</p>
   <dt><code><var>input</var>.<a href=#dom-input-checked id=dom-input-checked-dev>checked</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the current <a href=form-control-infrastructure.html#concept-fe-checked id=common-input-element-apis:concept-fe-checked>checkedness</a> of the form
    control.</p>

    <p>Can be set, to change the <a href=form-control-infrastructure.html#concept-fe-checked id=common-input-element-apis:concept-fe-checked-2>checkedness</a>.</p>
   <dt><code><var>input</var>.<a href=#dom-input-files id=dom-input-files-dev>files</a> [ = <var>files</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/FileList title="An object of this type is returned by the files property of the HTML <input> element; this lets you access the list of files selected with the <input type=&quot;file&quot;> element. It's also used for a list of files dropped into web content when using the drag and drop API; see the DataTransfer object for details on this usage.">FileList</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files title="The HTMLInputElement.files property allows you to access the FileList selected with the <input type=&quot;file&quot;> element.">HTMLInputElement/files</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>2+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span title="Partial implementation.">🔰 10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns a <code id=common-input-element-apis:filelist><a data-x-internal=filelist href=https://w3c.github.io/FileAPI/#filelist-section>FileList</a></code> object listing the <a href=#concept-input-type-file-selected id=common-input-element-apis:concept-input-type-file-selected>selected files</a> of the form control.</p>

    <p>Returns null if the control isn't a file control.</p>

    <p>Can be set to a <code id=common-input-element-apis:filelist-2><a data-x-internal=filelist href=https://w3c.github.io/FileAPI/#filelist-section>FileList</a></code> object to change the <a href=#concept-input-type-file-selected id=common-input-element-apis:concept-input-type-file-selected-2>selected files</a> of the form control. For
    instance, as the result of a drag-and-drop operation.</p>
   <dt><code><var>input</var>.<a href=#dom-input-valueasdate id=dom-input-valueasdate-dev>valueAsDate</a> [ = <var>value</var> ]</code><dd>
    <p>Returns a <code id=common-input-element-apis:date><a data-x-internal=date href=https://tc39.es/ecma262/#sec-date-objects>Date</a></code> object representing the form control's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-2>value</a>, if applicable; otherwise, returns null.</p>

    <p>Can be set, to change the value.</p>

    <p>Throws an <a id=common-input-element-apis:invalidstateerror-2 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=common-input-element-apis:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the
    control isn't date- or time-based.</p>
   <dt><code><var>input</var>.<a href=#dom-input-valueasnumber id=dom-input-valueasnumber-dev>valueAsNumber</a> [ = <var>value</var> ]</code><dd>
    <p>Returns a number representing the form control's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-3>value</a>, if applicable; otherwise, returns NaN.</p>

    <p>Can be set, to change the value. Setting this to NaN will set the underlying value to the
    empty string.</p>

    <p>Throws an <a id=common-input-element-apis:invalidstateerror-3 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=common-input-element-apis:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the
    control is neither date- or time-based nor numeric.</p>
   <dt><code><var>input</var>.<a href=#dom-input-stepup id=dom-input-stepup-dev>stepUp</a>([ <var>n</var> ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp title="The HTMLInputElement.stepUp() method increments the value of a numeric type of <input> element by the value of the step attribute, or the default step value if the step attribute is not explicitly set. The method, when invoked, increments the value by (step * n), where n defaults to 1 if not specified, and step defaults to the default value for step if not specified.">HTMLInputElement/stepUp</a><div class=support><span class="firefox yes"><span>Firefox</span><span title="Partial implementation.">🔰 16+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>5+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dt><code><var>input</var>.<a href=#dom-input-stepdown id=dom-input-stepdown-dev>stepDown</a>([ <var>n</var> ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown title="The HTMLInputElement.stepDown([n]) method decrements the value of a numeric type of <input> element by the value of the step attribute or up to n multiples of the step attribute if a number is passed as the parameter.">HTMLInputElement/stepDown</a><div class=support><span class="firefox yes"><span>Firefox</span><span title="Partial implementation.">🔰 16+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>5+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Changes the form control's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-4>value</a> by the value given in
    the <code id=common-input-element-apis:attr-input-step><a href=#attr-input-step>step</a></code> attribute, multiplied by <var>n</var>. The
    default value for <var>n</var> is 1.</p>

    <p>Throws <a id=common-input-element-apis:invalidstateerror-4 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=common-input-element-apis:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the control
    is neither date- or time-based nor numeric, or if the <code id=common-input-element-apis:attr-input-step-2><a href=#attr-input-step>step</a></code>
    attribute's value is "<code>any</code>".</p>
   <dt><code><var>input</var>.<a href=#dom-input-list id=dom-input-list-dev>list</a></code><dd><p>Returns the <code id=common-input-element-apis:the-datalist-element><a href=form-elements.html#the-datalist-element>datalist</a></code> element indicated by the <code id=common-input-element-apis:attr-input-list><a href=#attr-input-list>list</a></code> attribute.<dt><code><var>input</var>.<a href=#dom-input-showpicker id=dom-input-showpicker-dev>showPicker</a>()</code><dd>
    <p>Shows any applicable picker UI for <var>input</var>, so that the user can select a value.</p>

    <p>If <var>input</var> does not <a href=#input-support-picker id=common-input-element-apis:input-support-picker>support a picker</a>,
    this method does nothing.</p>

    <p>Throws an <a id=common-input-element-apis:invalidstateerror-5 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=common-input-element-apis:domexception-5><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if
    <var>input</var> is not <a href=form-control-infrastructure.html#concept-fe-mutable id=common-input-element-apis:concept-fe-mutable>mutable</a>.</p>

    <p>Throws a <a id=common-input-element-apis:notallowederror href=https://webidl.spec.whatwg.org/#notallowederror data-x-internal=notallowederror>"<code>NotAllowedError</code>"</a> <code id=common-input-element-apis:domexception-6><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if called
    without <a href=interaction.html#transient-activation id=common-input-element-apis:transient-activation>transient user activation</a>.</p>

    <p>Throws a <a id=common-input-element-apis:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=common-input-element-apis:domexception-7><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if
    <var>input</var> is inside a cross-origin <code id=common-input-element-apis:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>, unless <var>input</var> is in the
    <a href="#file-upload-state-(type=file)" id="common-input-element-apis:file-upload-state-(type=file)">File Upload</a> or <a href="#color-state-(type=color)" id="common-input-element-apis:color-state-(type=color)">Color</a> states.</p>
  </dl>

  

  <p>The <dfn data-dfn-for=HTMLInputElement id=dom-input-value data-dfn-type=attribute><code>value</code></dfn> IDL
  attribute allows scripts to manipulate the <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-5>value</a> of an
  <code id=common-input-element-apis:the-input-element-2><a href=#the-input-element>input</a></code> element. The attribute is in one of the following modes, which define its
  behavior:</p>

  <dl><dt><dfn id=dom-input-value-value>value</dfn>

   <dd>
    <p>On getting, return the current <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-6>value</a> of the
    element.</p>

    <p>On setting:</p>

    <ol><li><p>Let <var>oldValue</var> be the element's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-7>value</a>.<li><p>Set the element's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-8>value</a> to the new
     value.<li><p>Set the element's <a href=form-control-infrastructure.html#concept-fe-dirty id=common-input-element-apis:concept-fe-dirty>dirty value flag</a> to
     true.<li><p>Invoke the <a href=#value-sanitization-algorithm id=common-input-element-apis:value-sanitization-algorithm>value sanitization algorithm</a>, if the element's <code id=common-input-element-apis:attr-input-type><a href=#attr-input-type>type</a></code> attribute's current state defines one.<li><p>If the element's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-9>value</a> (after applying the
     <a href=#value-sanitization-algorithm id=common-input-element-apis:value-sanitization-algorithm-2>value sanitization algorithm</a>) is different from <var>oldValue</var>, and the
     element has a <a href=form-control-infrastructure.html#concept-textarea/input-cursor id=common-input-element-apis:concept-textarea/input-cursor>text entry cursor position</a>,
     move the <a href=form-control-infrastructure.html#concept-textarea/input-cursor id=common-input-element-apis:concept-textarea/input-cursor-2>text entry cursor position</a> to the
     end of the text control, unselecting any selected text and <a href=form-control-infrastructure.html#set-the-selection-direction id=common-input-element-apis:set-the-selection-direction>resetting the selection direction</a> to "<code>none</code>".</ol>
   <dt><dfn id=dom-input-value-default>default</dfn>

   <dd>
    <p>On getting, if the element has a <code id=common-input-element-apis:attr-input-value><a href=#attr-input-value>value</a></code> content
    attribute, return that attribute's value; otherwise, return the empty string.</p>

    <p>On setting, set the value of the element's <code id=common-input-element-apis:attr-input-value-2><a href=#attr-input-value>value</a></code>
    content attribute to the new value.</p>
   <dt><dfn id=dom-input-value-default-on>default/on</dfn>

   <dd>
    <p>On getting, if the element has a <code id=common-input-element-apis:attr-input-value-3><a href=#attr-input-value>value</a></code> content
    attribute, return that attribute's value; otherwise, return the string "<code>on</code>".</p>

    <p>On setting, set the value of the element's <code id=common-input-element-apis:attr-input-value-4><a href=#attr-input-value>value</a></code>
    content attribute to the new value.</p>
   <dt><dfn id=dom-input-value-filename>filename</dfn>

   <dd id=fakepath-orly>

    <p>On getting, return the string "<code>C:\fakepath\</code>" followed by the name of
    the first file in the list of <a href=#concept-input-type-file-selected id=common-input-element-apis:concept-input-type-file-selected-3>selected
    files</a>, if any, or the empty string if the list is empty.</p>

    <p>On setting, if the new value is the empty string, empty the list of <a href=#concept-input-type-file-selected id=common-input-element-apis:concept-input-type-file-selected-4>selected files</a>; otherwise, throw an
    <a id=common-input-element-apis:invalidstateerror-6 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=common-input-element-apis:domexception-8><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>

    <p class=note>This "fakepath" requirement is a sad accident of history. See <a href=#fakepath-srsly>the example in the File Upload state section</a> for more
    information.</p>

    <p class=note>Since <a href=#concept-input-file-path id=common-input-element-apis:concept-input-file-path>path components</a> are not
    permitted in filenames in the list of <a href=#concept-input-type-file-selected id=common-input-element-apis:concept-input-type-file-selected-5>selected
    files</a>, the "\fakepath\" cannot be mistaken for a path component.</p>
   </dl>

  <hr>

  <p>The <dfn data-dfn-for=HTMLInputElement id=dom-input-checked data-dfn-type=attribute><code>checked</code></dfn>
  IDL attribute allows scripts to manipulate the <a href=form-control-infrastructure.html#concept-fe-checked id=common-input-element-apis:concept-fe-checked-3>checkedness</a> of an <code id=common-input-element-apis:the-input-element-3><a href=#the-input-element>input</a></code> element. On getting, it
  must return the current <a href=form-control-infrastructure.html#concept-fe-checked id=common-input-element-apis:concept-fe-checked-4>checkedness</a> of the element; and
  on setting, it must set the element's <a href=form-control-infrastructure.html#concept-fe-checked id=common-input-element-apis:concept-fe-checked-5>checkedness</a> to the
  new value and set the element's <a href=#concept-input-checked-dirty-flag id=common-input-element-apis:concept-input-checked-dirty-flag>dirty checkedness
  flag</a> to true.</p>

  <hr>

  <p>The <dfn data-dfn-for=HTMLInputElement id=dom-input-files data-dfn-type=attribute><code>files</code></dfn> IDL
  attribute allows scripts to access the element's <a href=#concept-input-type-file-selected id=common-input-element-apis:concept-input-type-file-selected-6>selected files</a>.

  <p>On getting, if the IDL attribute <a href=#concept-input-apply id=common-input-element-apis:concept-input-apply>applies</a>, it must
  return a <code id=common-input-element-apis:filelist-3><a data-x-internal=filelist href=https://w3c.github.io/FileAPI/#filelist-section>FileList</a></code> object that represents the current <a href=#concept-input-type-file-selected id=common-input-element-apis:concept-input-type-file-selected-7>selected files</a>. The same object must be returned
  until the list of <a href=#concept-input-type-file-selected id=common-input-element-apis:concept-input-type-file-selected-8>selected files</a> changes.
  If the IDL attribute <a href=#do-not-apply id=common-input-element-apis:do-not-apply>does not apply</a>, then it must instead
  return null. <a href=references.html#refsFILEAPI>[FILEAPI]</a></p>

  <p>On setting, it must run these steps:

  <ol><li><p>If the IDL attribute <a href=#do-not-apply id=common-input-element-apis:do-not-apply-2>does not apply</a> or the given value
   is null, then return.<li><p>Replace the element's <a href=#concept-input-type-file-selected id=common-input-element-apis:concept-input-type-file-selected-9>selected
   files</a> with the given value.</ol>

  <hr>

  <p>The <dfn data-dfn-for=HTMLInputElement id=dom-input-valueasdate data-dfn-type=attribute><code>valueAsDate</code></dfn> IDL attribute represents the <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-10>value</a> of the element, interpreted as a date.</p>

  <p>On getting, if the <code id=common-input-element-apis:dom-input-valueasdate><a href=#dom-input-valueasdate>valueAsDate</a></code> attribute <a href=#do-not-apply id=common-input-element-apis:do-not-apply-3>does not apply</a>, as defined for the <code id=common-input-element-apis:the-input-element-4><a href=#the-input-element>input</a></code> element's <code id=common-input-element-apis:attr-input-type-2><a href=#attr-input-type>type</a></code> attribute's current state, then return null. Otherwise, run
  the <a href=#concept-input-value-string-date id=common-input-element-apis:concept-input-value-string-date>algorithm to convert a string to a
  <code>Date</code> object</a> defined for that state to the element's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-11>value</a>; if the algorithm returned a <code id=common-input-element-apis:date-2><a data-x-internal=date href=https://tc39.es/ecma262/#sec-date-objects>Date</a></code> object, then
  return it, otherwise, return null.</p>

  <p>On setting, if the <code id=common-input-element-apis:dom-input-valueasdate-2><a href=#dom-input-valueasdate>valueAsDate</a></code> attribute <a href=#do-not-apply id=common-input-element-apis:do-not-apply-4>does not apply</a>, as defined for the <code id=common-input-element-apis:the-input-element-5><a href=#the-input-element>input</a></code> element's <code id=common-input-element-apis:attr-input-type-3><a href=#attr-input-type>type</a></code> attribute's current state, then throw an
  <a id=common-input-element-apis:invalidstateerror-7 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=common-input-element-apis:domexception-9><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>; otherwise, if the new
  value is not null and not a <code id=common-input-element-apis:date-3><a data-x-internal=date href=https://tc39.es/ecma262/#sec-date-objects>Date</a></code> object throw a <code id=common-input-element-apis:typeerror><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> exception;
  otherwise, if the new value is null or a <code id=common-input-element-apis:date-4><a data-x-internal=date href=https://tc39.es/ecma262/#sec-date-objects>Date</a></code> object representing the NaN time value,
  then set the <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-12>value</a> of the element to the empty string;
  otherwise, run the <a href=#concept-input-value-date-string id=common-input-element-apis:concept-input-value-date-string>algorithm to convert a
  <code>Date</code> object to a string</a>, as defined for that state, on the new value, and set
  the <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-13>value</a> of the element to the resulting string.</p>

  <hr>

  <p>The <dfn data-dfn-for=HTMLInputElement id=dom-input-valueasnumber data-dfn-type=attribute><code>valueAsNumber</code></dfn> IDL attribute represents the <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-14>value</a> of the element, interpreted as a number.</p>

  <p>On getting, if the <code id=common-input-element-apis:dom-input-valueasnumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> attribute <a href=#do-not-apply id=common-input-element-apis:do-not-apply-5>does not apply</a>, as defined for the <code id=common-input-element-apis:the-input-element-6><a href=#the-input-element>input</a></code> element's <code id=common-input-element-apis:attr-input-type-4><a href=#attr-input-type>type</a></code> attribute's current state, then return a Not-a-Number (NaN)
  value. Otherwise, run the <a href=#concept-input-value-string-number id=common-input-element-apis:concept-input-value-string-number>algorithm to convert a
  string to a number</a> defined for that state to the element's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-15>value</a>; if the algorithm returned a number, then return it,
  otherwise, return a Not-a-Number (NaN) value.</p>

  <p>On setting, if the new value is infinite, then throw a <code id=common-input-element-apis:typeerror-2><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> exception.
  Otherwise, if the <code id=common-input-element-apis:dom-input-valueasnumber-2><a href=#dom-input-valueasnumber>valueAsNumber</a></code> attribute <a href=#do-not-apply id=common-input-element-apis:do-not-apply-6>does not apply</a>, as defined for the <code id=common-input-element-apis:the-input-element-7><a href=#the-input-element>input</a></code> element's <code id=common-input-element-apis:attr-input-type-5><a href=#attr-input-type>type</a></code> attribute's current state, then throw an
  <a id=common-input-element-apis:invalidstateerror-8 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=common-input-element-apis:domexception-10><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>. Otherwise, if the new
  value is a Not-a-Number (NaN) value, then set the <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-16>value</a> of
  the element to the empty string. Otherwise, run the <a href=#concept-input-value-number-string id=common-input-element-apis:concept-input-value-number-string>algorithm to convert a number to a string</a>, as
  defined for that state, on the new value, and set the <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-17>value</a>
  of the element to the resulting string.</p>

  <hr>

  <p>The <dfn data-dfn-for=HTMLInputElement id=dom-input-stepdown data-dfn-type=method><code>stepDown(<var>n</var>)</code></dfn> and <dfn data-dfn-for=HTMLInputElement id=dom-input-stepup data-dfn-type=method><code>stepUp(<var>n</var>)</code></dfn> methods,
  when invoked, must run the following algorithm:</p>

  <ol><li><p>If the <code id=common-input-element-apis:dom-input-stepdown><a href=#dom-input-stepdown>stepDown()</a></code> and <code id=common-input-element-apis:dom-input-stepup><a href=#dom-input-stepup>stepUp()</a></code> methods <a href=#do-not-apply id=common-input-element-apis:do-not-apply-7>do not apply</a>, as defined for the
   <code id=common-input-element-apis:the-input-element-8><a href=#the-input-element>input</a></code> element's <code id=common-input-element-apis:attr-input-type-6><a href=#attr-input-type>type</a></code> attribute's current state,
   then throw an <a id=common-input-element-apis:invalidstateerror-9 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=common-input-element-apis:domexception-11><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If the element has no <a href=#concept-input-step id=common-input-element-apis:concept-input-step>allowed value step</a>, then
   throw an <a id=common-input-element-apis:invalidstateerror-10 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=common-input-element-apis:domexception-12><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If the element has a <a href=#concept-input-min id=common-input-element-apis:concept-input-min>minimum</a> and a <a href=#concept-input-max id=common-input-element-apis:concept-input-max>maximum</a> and the <a href=#concept-input-min id=common-input-element-apis:concept-input-min-2>minimum</a>
   is greater than the <a href=#concept-input-max id=common-input-element-apis:concept-input-max-2>maximum</a>, then return.</p>

   <li><p>If the element has a <a href=#concept-input-min id=common-input-element-apis:concept-input-min-3>minimum</a> and a <a href=#concept-input-max id=common-input-element-apis:concept-input-max-3>maximum</a> and there is no value greater than or equal to the
   element's <a href=#concept-input-min id=common-input-element-apis:concept-input-min-4>minimum</a> and less than or equal to the element's
   <a href=#concept-input-max id=common-input-element-apis:concept-input-max-4>maximum</a> that, when subtracted from the <a href=#concept-input-min-zero id=common-input-element-apis:concept-input-min-zero>step base</a>, is an integral multiple of the <a href=#concept-input-step id=common-input-element-apis:concept-input-step-2>allowed value step</a>, then return.</p>

   <li><p>If applying the <a href=#concept-input-value-string-number id=common-input-element-apis:concept-input-value-string-number-2>algorithm to convert a
   string to a number</a> to the string given by the element's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-18>value</a> does not result in an error, then let <var>value</var> be the result of that algorithm. Otherwise, let <var>value</var>
   be zero.<li><p>Let <var>valueBeforeStepping</var> be <var>value</var>.<li>
    <p>If <var>value</var> subtracted from the <a href=#concept-input-min-zero id=common-input-element-apis:concept-input-min-zero-2>step
    base</a> is not an integral multiple of the <a href=#concept-input-step id=common-input-element-apis:concept-input-step-3>allowed value
    step</a>, then set <var>value</var> to the nearest value that, when subtracted from
    the <a href=#concept-input-min-zero id=common-input-element-apis:concept-input-min-zero-3>step base</a>, is an integral multiple of the <a href=#concept-input-step id=common-input-element-apis:concept-input-step-4>allowed value step</a>, and that is less than <var>value</var> if
    the method invoked was the <code id=common-input-element-apis:dom-input-stepdown-2><a href=#dom-input-stepdown>stepDown()</a></code> method, and more
    than <var>value</var> otherwise.</p>

    <p>Otherwise (<var>value</var> subtracted from the <a href=#concept-input-min-zero id=common-input-element-apis:concept-input-min-zero-4>step base</a> is an integral multiple of the <a href=#concept-input-step id=common-input-element-apis:concept-input-step-5>allowed value step</a>):</p>

    <ol><li><p>Let <var>n</var> be the argument.<li><p>Let <var>delta</var> be the <a href=#concept-input-step id=common-input-element-apis:concept-input-step-6>allowed value
     step</a> multiplied by <var>n</var>.<li><p>If the method invoked was the <code id=common-input-element-apis:dom-input-stepdown-3><a href=#dom-input-stepdown>stepDown()</a></code> method,
     negate <var>delta</var>.<li><p>Let <var>value</var> be the result of adding <var>delta</var> to <var>value</var>.</ol>
   <li><p>If the element has a <a href=#concept-input-min id=common-input-element-apis:concept-input-min-5>minimum</a>, and <var>value</var>
   is less than that <a href=#concept-input-min id=common-input-element-apis:concept-input-min-6>minimum</a>, then set
   <var>value</var> to the smallest value that, when subtracted from the <a href=#concept-input-min-zero id=common-input-element-apis:concept-input-min-zero-5>step base</a>, is an integral multiple of the <a href=#concept-input-step id=common-input-element-apis:concept-input-step-7>allowed value step</a>, and that is more than or equal to
   that <a href=#concept-input-min id=common-input-element-apis:concept-input-min-7>minimum</a>.<li><p>If the element has a <a href=#concept-input-max id=common-input-element-apis:concept-input-max-5>maximum</a>, and <var>value</var>
   is greater than that <a href=#concept-input-max id=common-input-element-apis:concept-input-max-6>maximum</a>, then
   set <var>value</var> to the largest value that, when subtracted from the <a href=#concept-input-min-zero id=common-input-element-apis:concept-input-min-zero-6>step base</a>, is an integral multiple of the <a href=#concept-input-step id=common-input-element-apis:concept-input-step-8>allowed value step</a>, and that is less than or equal to
   that <a href=#concept-input-max id=common-input-element-apis:concept-input-max-7>maximum</a>.<li>
    <p>If either the method invoked was the <code id=common-input-element-apis:dom-input-stepdown-4><a href=#dom-input-stepdown>stepDown()</a></code>
    method and <var>value</var> is greater than <var>valueBeforeStepping</var>, or the method
    invoked was the <code id=common-input-element-apis:dom-input-stepup-2><a href=#dom-input-stepup>stepUp()</a></code> method and <var>value</var> is
    less than <var>valueBeforeStepping</var>, then return.</p>

    <div class=example>
     <p>This ensures that invoking the <code id=common-input-element-apis:dom-input-stepup-3><a href=#dom-input-stepup>stepUp()</a></code> method on the
     <code id=common-input-element-apis:the-input-element-9><a href=#the-input-element>input</a></code> element in the following example does not change the <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-19>value</a> of that element:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>number</c-> <c- e>value</c-><c- o>=</c-><c- s>1</c-> <c- e>max</c-><c- o>=</c-><c- s>0</c-><c- p>&gt;</c-></code></pre>
    </div>
   <li><p>Let <var>value as string</var> be the result of running the <a href=#concept-input-value-number-string id=common-input-element-apis:concept-input-value-number-string-2>algorithm to convert a number to a string</a>, as
   defined for the <code id=common-input-element-apis:the-input-element-10><a href=#the-input-element>input</a></code> element's <code id=common-input-element-apis:attr-input-type-7><a href=#attr-input-type>type</a></code>
   attribute's current state, on <var>value</var>.<li><p>Set the <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-20>value</a> of the element to <var>value
   as string</var>.</ol>

  <hr>

  <p>The <dfn data-dfn-for=HTMLInputElement id=dom-input-list data-dfn-type=attribute><code>list</code></dfn> IDL
  attribute must return the current <a href=#concept-input-list id=common-input-element-apis:concept-input-list>suggestions source
  element</a>, if any, or null otherwise.</p>

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker title="The HTMLInputElement.showPicker() method displays the browser picker for an input element.">HTMLInputElement/showPicker</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>101+</span></span><span class="safari yes"><span>Safari</span><span>16+</span></span><span class="chrome yes"><span>Chrome</span><span>99+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>99+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <code id=common-input-element-apis:htmlinputelement><a href=#htmlinputelement>HTMLInputElement</a></code> <dfn data-dfn-for=HTMLInputElement id=dom-input-showpicker data-dfn-type=method><code>showPicker()</code></dfn> and <code id=common-input-element-apis:htmlselectelement><a href=form-elements.html#htmlselectelement>HTMLSelectElement</a></code> <dfn data-dfn-for=HTMLSelectElement id=dom-select-showpicker data-dfn-type=method><code>showPicker()</code></dfn>
  method steps are:</p>

  <ol><li><p>If <a id=common-input-element-apis:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> is not <a href=form-control-infrastructure.html#concept-fe-mutable id=common-input-element-apis:concept-fe-mutable-2>mutable</a>, then throw
   an <a id=common-input-element-apis:invalidstateerror-11 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=common-input-element-apis:domexception-13><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>
    <p>If <a id=common-input-element-apis:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=common-input-element-apis:relevant-settings-object href=webappapis.html#relevant-settings-object>relevant settings object</a>'s <a href=webappapis.html#concept-settings-object-origin id=common-input-element-apis:concept-settings-object-origin>origin</a> is not <a id=common-input-element-apis:same-origin href=browsers.html#same-origin>same origin</a> with
    <a id=common-input-element-apis:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=common-input-element-apis:relevant-settings-object-2 href=webappapis.html#relevant-settings-object>relevant settings object</a>'s <a id=common-input-element-apis:concept-environment-top-level-origin href=webappapis.html#concept-environment-top-level-origin>top-level origin</a>, and
    <a id=common-input-element-apis:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> is a <code id=common-input-element-apis:the-select-element><a href=form-elements.html#the-select-element>select</a></code> element, or
    <a id=common-input-element-apis:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <code id=common-input-element-apis:attr-input-type-8><a href=#attr-input-type>type</a></code> attribute is not in the <a href="#file-upload-state-(type=file)" id="common-input-element-apis:file-upload-state-(type=file)-2">File Upload</a> state or <a href="#color-state-(type=color)" id="common-input-element-apis:color-state-(type=color)-2">Color</a> state, then throw a
    <a id=common-input-element-apis:securityerror-2 href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=common-input-element-apis:domexception-14><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>

    <p class=note><a href="#file-upload-state-(type=file)" id="common-input-element-apis:file-upload-state-(type=file)-3">File</a> and <a href="#color-state-(type=color)" id="common-input-element-apis:color-state-(type=color)-3">Color</a> inputs are exempted from this check for historical
    reason: their <a href=#input-activation-behavior id=common-input-element-apis:input-activation-behavior>input activation behavior</a> also shows their pickers, and has never
    been guarded by an origin check.</p>
   <li><p>If <a id=common-input-element-apis:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=common-input-element-apis:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global object</a> does not have <a id=common-input-element-apis:transient-activation-2 href=interaction.html#transient-activation>transient
   activation</a>, then throw a <a id=common-input-element-apis:notallowederror-2 href=https://webidl.spec.whatwg.org/#notallowederror data-x-internal=notallowederror>"<code>NotAllowedError</code>"</a>
   <code id=common-input-element-apis:domexception-15><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If <a id=common-input-element-apis:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> is a <code id=common-input-element-apis:the-select-element-2><a href=form-elements.html#the-select-element>select</a></code> element, and <a id=common-input-element-apis:this-8 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> is not
   <a id=common-input-element-apis:being-rendered href=rendering.html#being-rendered>being rendered</a>, then throw a <a id=common-input-element-apis:notsupportederror href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a>
   <code id=common-input-element-apis:domexception-16><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p><a href=#show-the-picker,-if-applicable id=common-input-element-apis:show-the-picker,-if-applicable>Show the picker, if applicable</a>, for <a id=common-input-element-apis:this-9 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.</ol>

  <p>To <dfn id=show-the-picker,-if-applicable>show the picker, if applicable</dfn> for an <code id=common-input-element-apis:the-input-element-11><a href=#the-input-element>input</a></code> or <code id=common-input-element-apis:the-select-element-3><a href=form-elements.html#the-select-element>select</a></code>
  element <var>element</var>:</p>

  <ol><li><p>If <var>element</var>'s <a id=common-input-element-apis:concept-relevant-global-2 href=webappapis.html#concept-relevant-global>relevant global object</a> does not have <a id=common-input-element-apis:transient-activation-3 href=interaction.html#transient-activation>transient
   activation</a>, then return.<li><p>If <var>element</var> is not <i id=common-input-element-apis:concept-fe-mutable-3><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>, then
   return.<li><p><a id=common-input-element-apis:consume-user-activation href=interaction.html#consume-user-activation>Consume user activation</a> given <var>element</var>'s <a id=common-input-element-apis:concept-relevant-global-3 href=webappapis.html#concept-relevant-global>relevant global
   object</a>.<li><p>If <var>element</var> does not <a href=#input-support-picker id=common-input-element-apis:input-support-picker-2>support a
   picker</a>, then return.<li>
    <p>If <var>element</var> is an <code id=common-input-element-apis:the-input-element-12><a href=#the-input-element>input</a></code> element and <var>element</var>'s <code id=common-input-element-apis:attr-input-type-9><a href=#attr-input-type>type</a></code> attribute is in the <a href="#file-upload-state-(type=file)" id="common-input-element-apis:file-upload-state-(type=file)-4">File Upload</a> state, then run these steps <a id=common-input-element-apis:in-parallel href=infrastructure.html#in-parallel>in
    parallel</a>:</p>

    <ol><li><p>Optionally, wait until any prior execution of this algorithm has terminated.<li><p>Let <var>dismissed</var> be the result of <a id=common-input-element-apis:webdriver-bidi-file-dialog-opened href=https://w3c.github.io/webdriver-bidi/#webdriver-bidi-file-dialog-opened data-x-internal=webdriver-bidi-file-dialog-opened>WebDriver BiDi file dialog opened</a>
     with <var>element</var>.<li>
      <p>If <var>dismissed</var> is false:</p>

      <ol><li><p>Display a prompt to the user requesting that the user specify some files. If the <code id=common-input-element-apis:attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute is not set on <var>element</var>, there
       must be no more than one file selected; otherwise, any number may be selected. Files can be
       from the filesystem or created on the fly, e.g., a picture taken from a camera connected to the
       user's device.<li><p>Wait for the user to have made their selection.</ol>
     <li><p>If <var>dismissed</var> is true or if the user dismissed the prompt without changing
     their selection, then <a id=common-input-element-apis:queue-an-element-task href=webappapis.html#queue-an-element-task>queue an element task</a> on the <a id=common-input-element-apis:user-interaction-task-source href=webappapis.html#user-interaction-task-source>user interaction task
     source</a> given <var>element</var> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=common-input-element-apis:concept-event-fire data-x-internal=concept-event-fire>fire an
     event</a> named <code id=common-input-element-apis:event-cancel><a href=indices.html#event-cancel>cancel</a></code> at <var>element</var>, with the
     <code id=common-input-element-apis:dom-event-bubbles><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> attribute initialized to true.<li><p>Otherwise, <a href=#update-the-file-selection id=common-input-element-apis:update-the-file-selection>update the file selection</a> for <var>element</var>.</ol>

    <p class=note>As with all user interface specifications, user agents have a good deal of
    freedom in how they interpret these requirements. The above text implies that a user either
    dismisses the prompt or changes their selection; exactly one of these will be true. But the
    mapping of these possibilities to specific user interface elements is not mandated by the
    standard. For example, a user agent might interpret clicking the "Cancel" button when files were
    previously selected as a change of selection to select zero files, thus firing <code id=common-input-element-apis:event-input><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id=common-input-element-apis:event-change><a href=indices.html#event-change>change</a></code>. Or it might
    interpret such a click as a dismissal that leaves the selection unchanged, thus firing <code id=common-input-element-apis:event-cancel-2><a href=indices.html#event-cancel>cancel</a></code>. Similarly, it's up to the user agent whether re-selecting
    the same files as were previously selected counts as a dismissal, or as a change of
    selection.</p>
   <li>
    <p>Otherwise, the user agent should show the relevant user interface for selecting a value for
    <var>element</var>, in the way it normally would when the user interacts with the control.</p>

    <p>When showing such a user interface, it must respect the requirements stated in the relevant
    parts of the specification for how <var>element</var> behaves given its <code id=common-input-element-apis:attr-input-type-10><a href=#attr-input-type>type</a></code> attribute state. (For example, various sections describe
    restrictions on the resulting <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-apis:concept-fe-value-21>value</a> string.)</p>

    <p>This step can have side effects, such as closing other pickers that were previously shown by
    this algorithm. (If this closes a file selection picker, then per the above that will lead to
    firing either <code id=common-input-element-apis:event-input-2><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id=common-input-element-apis:event-change-2><a href=indices.html#event-change>change</a></code> events, or a <code id=common-input-element-apis:event-cancel-3><a href=indices.html#event-cancel>cancel</a></code>
    event.)</p>
   </ol>

  


  

  <h5 id=common-input-element-events><span class=secno>4.10.5.5</span> Common event behaviors<a href=#common-input-element-events class=self-link></a></h5>

  <p>When the <code id=common-input-element-events:event-input><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> and <code id=common-input-element-events:event-change><a href=indices.html#event-change>change</a></code> events <a href=#concept-input-apply id=common-input-element-events:concept-input-apply>apply</a>
  (which is the case for all <code id=common-input-element-events:the-input-element><a href=#the-input-element>input</a></code> controls other than <a href=forms.html#concept-button id=common-input-element-events:concept-button>buttons</a> and those with the <code id=common-input-element-events:attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#hidden-state-(type=hidden)" id="common-input-element-events:hidden-state-(type=hidden)">Hidden</a> state), the events are fired to indicate that the
  user has interacted with the control. The <code id=common-input-element-events:event-input-2><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> event fires
  whenever the user has modified the data of the control. The <code id=common-input-element-events:event-change-2><a href=indices.html#event-change>change</a></code> event fires when the value is committed, if that makes sense
  for the control, or else when the control <a href=interaction.html#unfocus-causes-change-event>loses focus</a>.
  In all cases, the <code id=common-input-element-events:event-input-3><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> event comes before the corresponding
  <code id=common-input-element-events:event-change-3><a href=indices.html#event-change>change</a></code> event (if any).</p>

  <p>When an <code id=common-input-element-events:the-input-element-2><a href=#the-input-element>input</a></code> element has a defined <a href=#input-activation-behavior id=common-input-element-events:input-activation-behavior>input activation behavior</a>, the
  rules for dispatching these events, if they <a href=#concept-input-apply id=common-input-element-events:concept-input-apply-2>apply</a>, are
  given in the section above that defines the <code id=common-input-element-events:attr-input-type-2><a href=#attr-input-type>type</a></code> attribute's
  state. (This is the case for all <code id=common-input-element-events:the-input-element-3><a href=#the-input-element>input</a></code> controls with the <code id=common-input-element-events:attr-input-type-3><a href=#attr-input-type>type</a></code> attribute in the <a href="#checkbox-state-(type=checkbox)" id="common-input-element-events:checkbox-state-(type=checkbox)">Checkbox</a> state, the <a href="#radio-button-state-(type=radio)" id="common-input-element-events:radio-button-state-(type=radio)">Radio Button</a> state, or the <a href="#file-upload-state-(type=file)" id="common-input-element-events:file-upload-state-(type=file)">File Upload</a> state.)</p>

  <p>For <code id=common-input-element-events:the-input-element-4><a href=#the-input-element>input</a></code> elements without a defined <a href=#input-activation-behavior id=common-input-element-events:input-activation-behavior-2>input activation behavior</a>, but
  to which these events <a href=#concept-input-apply id=common-input-element-events:concept-input-apply-3>apply</a>, and for which the user
  interface involves both interactive manipulation and an explicit commit action, then when the
  user changes the element's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-events:concept-fe-value>value</a>, the user agent must
  <a id=common-input-element-events:queue-an-element-task href=webappapis.html#queue-an-element-task>queue an element task</a> on the <a id=common-input-element-events:user-interaction-task-source href=webappapis.html#user-interaction-task-source>user interaction task source</a> given the
  <code id=common-input-element-events:the-input-element-5><a href=#the-input-element>input</a></code> element to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=common-input-element-events:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=common-input-element-events:event-input-4><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> at the <code id=common-input-element-events:the-input-element-6><a href=#the-input-element>input</a></code> element, with the <code id=common-input-element-events:dom-event-bubbles><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> and <code id=common-input-element-events:dom-event-composed><a data-x-internal=dom-event-composed href=https://dom.spec.whatwg.org/#dom-event-composed>composed</a></code>
  attributes initialized to true, and any time the user commits the change, the user agent must
  <a id=common-input-element-events:queue-an-element-task-2 href=webappapis.html#queue-an-element-task>queue an element task</a> on the <a id=common-input-element-events:user-interaction-task-source-2 href=webappapis.html#user-interaction-task-source>user interaction task source</a> given the
  <code id=common-input-element-events:the-input-element-7><a href=#the-input-element>input</a></code> element to set its <a id=common-input-element-events:user-validity href=form-control-infrastructure.html#user-validity>user validity</a> to true and <a href=https://dom.spec.whatwg.org/#concept-event-fire id=common-input-element-events:concept-event-fire-2 data-x-internal=concept-event-fire>fire an event</a> named <code id=common-input-element-events:event-change-4><a href=indices.html#event-change>change</a></code>
  at the <code id=common-input-element-events:the-input-element-8><a href=#the-input-element>input</a></code> element, with the <code id=common-input-element-events:dom-event-bubbles-2><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code>
  attribute initialized to true.</p>

  <p class=example>An example of a user interface involving both interactive manipulation and a
  commit action would be a <a href="#range-state-(type=range)" id="common-input-element-events:range-state-(type=range)">Range</a> controls that use a
  slider, when manipulated using a pointing device. While the user is dragging the control's knob,
  <code id=common-input-element-events:event-input-5><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> events would fire whenever the position changed,
  whereas the <code id=common-input-element-events:event-change-5><a href=indices.html#event-change>change</a></code> event would only fire when the user
  let go of the knob, committing to a specific value.</p>

  <p>For <code id=common-input-element-events:the-input-element-9><a href=#the-input-element>input</a></code> elements without a defined <a href=#input-activation-behavior id=common-input-element-events:input-activation-behavior-3>input activation behavior</a>, but
  to which these events <a href=#concept-input-apply id=common-input-element-events:concept-input-apply-4>apply</a>, and for which the user
  interface involves an explicit commit action but no intermediate manipulation, then any time the
  user commits a change to the element's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-events:concept-fe-value-2>value</a>, the user
  agent must <a id=common-input-element-events:queue-an-element-task-3 href=webappapis.html#queue-an-element-task>queue an element task</a> on the <a id=common-input-element-events:user-interaction-task-source-3 href=webappapis.html#user-interaction-task-source>user interaction task source</a>
  given the <code id=common-input-element-events:the-input-element-10><a href=#the-input-element>input</a></code> element to first <a href=https://dom.spec.whatwg.org/#concept-event-fire id=common-input-element-events:concept-event-fire-3 data-x-internal=concept-event-fire>fire an
  event</a> named <code id=common-input-element-events:event-input-6><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> at the <code id=common-input-element-events:the-input-element-11><a href=#the-input-element>input</a></code> element, with
  the <code id=common-input-element-events:dom-event-bubbles-3><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> and <code id=common-input-element-events:dom-event-composed-2><a data-x-internal=dom-event-composed href=https://dom.spec.whatwg.org/#dom-event-composed>composed</a></code> attributes initialized to true, and then <a href=https://dom.spec.whatwg.org/#concept-event-fire id=common-input-element-events:concept-event-fire-4 data-x-internal=concept-event-fire>fire an event</a> named <code id=common-input-element-events:event-change-6><a href=indices.html#event-change>change</a></code>
  at the <code id=common-input-element-events:the-input-element-12><a href=#the-input-element>input</a></code> element, with the <code id=common-input-element-events:dom-event-bubbles-4><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code>
  attribute initialized to true.</p>

  <p class=example>An example of a user interface with a commit action would be a <a href="#color-state-(type=color)" id="common-input-element-events:color-state-(type=color)">Color</a> control that consists of a single button that brings
  up a color wheel: if the <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-events:concept-fe-value-3>value</a> only changes when the dialog
  is closed, then that would be the explicit commit action. On the other hand, if manipulating the
  control changes the color interactively, then there might be no commit action.</p>

  <p class=example>Another example of a user interface with a commit action would be a <a href="#date-state-(type=date)" id="common-input-element-events:date-state-(type=date)">Date</a> control that allows both text-based user input and user
  selection from a drop-down calendar: while text input might not have an explicit commit step,
  selecting a date from the drop down calendar and then dismissing the drop down would be a commit
  action.</p>

  <p>For <code id=common-input-element-events:the-input-element-13><a href=#the-input-element>input</a></code> elements without a defined <a href=#input-activation-behavior id=common-input-element-events:input-activation-behavior-4>input activation behavior</a>, but
  to which these events <a href=#concept-input-apply id=common-input-element-events:concept-input-apply-5>apply</a>, any time the user causes
  the element's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-events:concept-fe-value-4>value</a> to change without an explicit commit
  action, the user agent must <a id=common-input-element-events:queue-an-element-task-4 href=webappapis.html#queue-an-element-task>queue an element task</a> on the <a id=common-input-element-events:user-interaction-task-source-4 href=webappapis.html#user-interaction-task-source>user interaction task
  source</a> given the <code id=common-input-element-events:the-input-element-14><a href=#the-input-element>input</a></code> element to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=common-input-element-events:concept-event-fire-5 data-x-internal=concept-event-fire>fire an
  event</a> named <code id=common-input-element-events:event-input-7><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> at the <code id=common-input-element-events:the-input-element-15><a href=#the-input-element>input</a></code> element, with
  the <code id=common-input-element-events:dom-event-bubbles-5><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> and <code id=common-input-element-events:dom-event-composed-3><a data-x-internal=dom-event-composed href=https://dom.spec.whatwg.org/#dom-event-composed>composed</a></code> attributes initialized to true. The corresponding
  <code id=common-input-element-events:event-change-7><a href=indices.html#event-change>change</a></code> event, if any, will be fired when the control <a href=interaction.html#unfocus-causes-change-event>loses focus</a>.</p>

  <p class=example>Examples of a user changing the element's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-events:concept-fe-value-5>value</a> would include the user typing into a text control, pasting
  a new value into the control, or undoing an edit in that control. Some user interactions do not
  cause changes to the value, e.g., hitting the "delete" key in an empty text control, or replacing
  some text in the control with text from the clipboard that happens to be exactly the same
  text.</p>

  <p class=example>A <a href="#range-state-(type=range)" id="common-input-element-events:range-state-(type=range)-2">Range</a> control in the form of a
  slider that the user has <a id=common-input-element-events:focused href=interaction.html#focused>focused</a> and is interacting with using a keyboard would be
  another example of the user changing the element's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-events:concept-fe-value-6>value</a>
  without a commit step.</p>

  <p>In the case of <a href=webappapis.html#concept-task id=common-input-element-events:concept-task>tasks</a> that just fire an <code id=common-input-element-events:event-input-8><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> event, user agents may wait for a suitable break in the user's
  interaction before <a href=webappapis.html#queue-an-element-task id=common-input-element-events:queue-an-element-task-5>queuing</a> the tasks; for example, a
  user agent could wait for the user to have not hit a key for 100ms, so as to only fire the event
  when the user pauses, instead of continuously for each keystroke. 

  <p>When the user agent is to change an <code id=common-input-element-events:the-input-element-16><a href=#the-input-element>input</a></code> element's <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-events:concept-fe-value-7>value</a> on behalf of the user (e.g. as part of a form prefilling
  feature), the user agent must <a id=common-input-element-events:queue-an-element-task-6 href=webappapis.html#queue-an-element-task>queue an element task</a> on the <a id=common-input-element-events:user-interaction-task-source-5 href=webappapis.html#user-interaction-task-source>user interaction
  task source</a> given the <code id=common-input-element-events:the-input-element-17><a href=#the-input-element>input</a></code> element to first update the <a href=form-control-infrastructure.html#concept-fe-value id=common-input-element-events:concept-fe-value-8>value</a> accordingly, then <a href=https://dom.spec.whatwg.org/#concept-event-fire id=common-input-element-events:concept-event-fire-6 data-x-internal=concept-event-fire>fire an
  event</a> named <code id=common-input-element-events:event-input-9><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> at the <code id=common-input-element-events:the-input-element-18><a href=#the-input-element>input</a></code> element, with
  the <code id=common-input-element-events:dom-event-bubbles-6><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> and <code id=common-input-element-events:dom-event-composed-4><a data-x-internal=dom-event-composed href=https://dom.spec.whatwg.org/#dom-event-composed>composed</a></code> attributes initialized to true, then <a href=https://dom.spec.whatwg.org/#concept-event-fire id=common-input-element-events:concept-event-fire-7 data-x-internal=concept-event-fire>fire an event</a> named <code id=common-input-element-events:event-change-8><a href=indices.html#event-change>change</a></code>
  at the <code id=common-input-element-events:the-input-element-19><a href=#the-input-element>input</a></code> element, with the <code id=common-input-element-events:dom-event-bubbles-7><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code>
  attribute initialized to true.</p>

  <p class=note>These events are not fired in response to changes made to the values of form
  controls by scripts. (This is to make it easier to update the values of form controls in response
  to the user manipulating the controls, without having to then filter out the script's own changes
  to avoid an infinite loop.)</p>

  <p class=note>These events are also not fired when the browser changes the values of form
  controls as part of <a href=browsing-the-web.html#restore-persisted-state id=common-input-element-events:restore-persisted-state>state restoration during
  navigation</a>.</p>

  



  <nav><a href=forms.html>← 4.10 Forms</a> — <a href=index.html>Table of Contents</a> — <a href=form-elements.html>4.10.6 The button element →</a></nav>
